Add agent workflows & stuff

apps/next/src/components/layout/auth/buttons/gibs-auth.tsx

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
 import { useAuthActions } from '@convex-dev/auth/react';
-import { KeyRound } from 'lucide-react';
+import { Github, KeyRound } from 'lucide-react';
 
 import type { buttonVariants } from '@spoon/ui';
 import { Button } from '@spoon/ui';
@@ -33,3 +33,21 @@ export const AuthentikSignInButton = ({
     </Button>
   );
 };
+
+export const GitHubSignInButton = ({ buttonProps, type = 'signIn' }: Props) => {
+  const { signIn } = useAuthActions();
+  return (
+    <Button
+      size='lg'
+      variant='outline'
+      onClick={() => signIn('github')}
+      className='text-lg font-semibold'
+      {...buttonProps}
+    >
+      <div className='my-auto flex flex-row items-center gap-2'>
+        <Github className='size-5' />
+        <p>{type === 'signIn' ? 'Continue' : 'Sign up'} with GitHub</p>
+      </div>
+    </Button>
+  );
+};

apps/next/src/components/layout/auth/buttons/index.tsx

@@ -1 +1 @@
-export { AuthentikSignInButton } from './gibs-auth';
+export { AuthentikSignInButton, GitHubSignInButton } from './gibs-auth';

apps/next/src/components/layout/auth/profile/avatar-upload.tsx

@@ -3,6 +3,7 @@
 import type { Preloaded } from 'convex/react';
 import type { ChangeEvent } from 'react';
 import { useRef, useState } from 'react';
+import { isRemoteImageUrl } from '@/lib/avatar';
 import { useMutation, usePreloadedQuery, useQuery } from 'convex/react';
 import { Loader2, Pencil, Upload, XIcon } from 'lucide-react';
 import { toast } from 'sonner';
@@ -48,10 +49,12 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
   const generateUploadUrl = useMutation(api.files.generateUploadUrl);
   const updateUser = useMutation(api.auth.updateUser);
 
+  const remoteImageUrl = isRemoteImageUrl(user?.image) ? user?.image : null;
   const currentImageUrl = useQuery(
     api.files.getImageUrl,
-    user?.image ? { storageId: user.image as Id<'_storage'> } : 'skip',
+    user?.image && !remoteImageUrl ? { storageId: user.image } : 'skip',
   );
+  const avatarUrl = remoteImageUrl ?? currentImageUrl;
 
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] ?? null;
@@ -117,7 +120,7 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
             onClick={() => inputRef.current?.click()}
           >
             <BasedAvatar
-              src={currentImageUrl ?? undefined}
+              src={avatarUrl ?? undefined}
               fullName={user?.name}
               className='h-42 w-42 text-6xl font-semibold'
               userIconProps={{ size: 100 }}

apps/next/src/components/layout/auth/profile/user-info.tsx

@@ -54,6 +54,7 @@ export const UserInfoForm = ({
   const providerMap: Record<string, string> = {
     unknown: 'Provider',
     authentik: 'Authentik',
+    github: 'GitHub',
   };
   const [loading, setLoading] = useState(false);
 

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

@@ -2,10 +2,10 @@
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { isRemoteImageUrl } from '@/lib/avatar';
 import { useAuthActions } from '@convex-dev/auth/react';
 import { useConvexAuth, useQuery } from 'convex/react';
 
-import type { Id } from '@spoon/backend/convex/_generated/dataModel.js';
 import { api } from '@spoon/backend/convex/_generated/api.js';
 import {
   BasedAvatar,
@@ -23,10 +23,12 @@ export const AvatarDropdown = () => {
   const { isLoading, isAuthenticated } = useConvexAuth();
   const { signOut } = useAuthActions();
   const user = useQuery(api.auth.getUser, {});
+  const remoteImageUrl = isRemoteImageUrl(user?.image) ? user?.image : null;
   const currentImageUrl = useQuery(
     api.files.getImageUrl,
-    user?.image ? { storageId: user.image as Id<'_storage'> } : 'skip',
+    user?.image && !remoteImageUrl ? { storageId: user.image } : 'skip',
   );
+  const avatarUrl = remoteImageUrl ?? currentImageUrl;
 
   if (isLoading) {
     return (
@@ -51,7 +53,7 @@ export const AvatarDropdown = () => {
     <DropdownMenu>
       <DropdownMenuTrigger>
         <BasedAvatar
-          src={currentImageUrl}
+          src={avatarUrl}
           fullName={user?.name}
           className='h-9 w-9'
           fallbackProps={{ className: 'text-sm font-semibold' }}