feat: enhance profile page and authentication with user avatar support

- Updated `next.config.ts` to allow images from various external sources, including LinkedIn and GitHub.
- Refactored `ProfilePage` to improve layout and display user avatar, name, and role more prominently.
- Enhanced `AuthButton` to show user avatar if available, improving user experience.
- Updated authentication logic in `auth.ts` to include user avatar and role in session management.
- Extended JWT type definitions to support new user fields (firstName, lastName, avatar, role) for better user data handling.

src/components/AuthButton.tsx

@@ -36,9 +36,18 @@ export function AuthButton() {
         className="p-1 h-auto"
         title={`Profil - ${session.user?.email}`}
       >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-        </svg>
+        {session.user?.avatar ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img 
+            src={session.user.avatar} 
+            alt="Avatar" 
+            className="w-4 h-4 rounded-full object-cover"
+          />
+        ) : (
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        )}
       </Button>
       <Button
         onClick={() => signOut({ callbackUrl: '/login' })}