feat: support oidc picture if available

app/components/Header.tsx

@@ -91,8 +91,19 @@ export default function Header(data: Props) {
 					<Link href="https://github.com/juanfont/headscale" text="Headscale" />
 					{data.user ? (
 						<Menu>
-							<Menu.IconButton label="User">
-								<CircleUser />
+							<Menu.IconButton
+								label="User"
+								className={cn(data.user.picture ? 'p-0' : '')}
+							>
+								{data.user.picture ? (
+									<img
+										src={data.user.picture}
+										alt={data.user.name}
+										className="w-8 h-8 rounded-full"
+									/>
+								) : (
+									<CircleUser />
+								)}
 							</Menu.IconButton>
 							<Menu.Panel
 								onAction={(key) => {

app/utils/oidc.ts

@@ -130,6 +130,7 @@ export async function finishAuthFlow(oidc: OidcConfig, options: FlowOptions) {
 		name: getName(user, claims),
 		email: user.email ?? claims.email?.toString(),
 		username: user.preferred_username ?? claims.preferred_username?.toString(),
+		picture: user.picture,
 	};
 }
 

app/utils/sessions.server.ts

@@ -12,6 +12,7 @@ export type SessionData = {
 		name: string;
 		email?: string;
 		username?: string;
+		picture?: string;
 	};
 };