Header has working auth stuff. Good place to let ai takeover maybe

apps/next/src/components/layout/header/controls/AvatarDropdown.tsx

@@ -0,0 +1,75 @@
+'use client';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  BasedAvatar,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@gib/ui';
+import { useConvexAuth, useQuery } from 'convex/react';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { api } from '@gib/backend/convex/_generated/api.js';
+
+export const AvatarDropdown = () => {
+  const router = useRouter();
+  const { isLoading, isAuthenticated } = useConvexAuth();
+  const { signOut } = useAuthActions();
+  const user = useQuery(api.auth.getUser, {});
+  const currentImageUrl = useQuery(
+    api.files.getImageUrl,
+    user?.image ? { storageId: user.image } : 'skip',
+  );
+
+  if (isLoading)
+    return <BasedAvatar className='animate-pulse lg:h-10 lg:w-10' />;
+  if (!isAuthenticated) return <div />;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <BasedAvatar
+          src={currentImageUrl}
+          fullName={user?.name}
+          className='lg:h-10 lg:w-10'
+          fallbackProps={{ className: 'text-xl font-semibold' }}
+          userIconProps={{ size: 32 }}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {(user?.name ?? user?.email) && (
+          <>
+            <DropdownMenuLabel className='font-bold text-center'>
+              {user.name?.trim() ?? user.email?.trim()}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem asChild>
+          <Link
+            href='/profile'
+            className='w-full justify-center cursor-pointer'
+          >
+            Edit Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className='h-[2px]' />
+        <DropdownMenuItem asChild>
+          <button
+            onClick={() =>
+              void signOut().then(() => {
+                router.push('/signin');
+              })
+            }
+            className='w-full justify-center cursor-pointer'
+          >
+            Sign Out
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

apps/next/src/components/layout/header/controls/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+import type { ThemeToggleProps } from '@gib/ui';
+import { ThemeToggle } from '@gib/ui';
+import { AvatarDropdown } from './AvatarDropdown';
+
+export const Controls = (themeToggleProps?: ThemeToggleProps) => {
+  return (
+    <div className='flex flex-row items-center'>
+      <ThemeToggle
+        size={1.2}
+        buttonProps={{
+          variant: 'secondary',
+          size: 'sm',
+          className: 'mr-4 py-5',
+          ...themeToggleProps?.buttonProps,
+        }}
+      />
+      <AvatarDropdown />
+    </div>
+  );
+};

apps/next/src/components/layout/header/index.tsx

@@ -2,9 +2,8 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { cn } from '@gib/ui';
 import type { ComponentProps } from 'react';
-//import { Controls } from './controls';
+import { Controls } from './controls';
 
 export default function Header(headerProps: ComponentProps<'header'>) {
   return (
@@ -40,7 +39,7 @@ export default function Header(headerProps: ComponentProps<'header'>) {
         </div>
 
         <div className='flex-1 flex justfiy-end'>
-
+          <Controls />
         </div>
       </div>
     </header>

apps/next/src/middleware.ts

@@ -29,6 +29,6 @@ export const config = {
     '/((?!_next/static|_next/image|favicon.ico|monitoring-tunnel|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
     '/((?!.*\\..*|_next).*)',
     '/',
-    '/(api|trpc)(.*)',
+    '/(api)(.*)',
   ],
 };