feat: add group avatar to GroupPage (#25878)

ref DEVEX-24

Figma:
https://www.figma.com/design/KWMwUzDZtd5U0aU9xCdFR2/Service-accounts---user-driven-access-controls?node-id=129-2158&m=dev

<img width="1840" height="1191" alt="image"
src="https://github.com/user-attachments/assets/5164ba3b-f967-49ab-a5d4-a8c2f9f0b973"
/>

site/src/pages/GroupsPage/GroupPage.tsx

@@ -18,6 +18,8 @@ import {
 } from "#/api/queries/groups";
 import type { Group, ReducedUser } from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
 import { Button } from "#/components/Button/Button";
 import { DeleteDialog } from "#/components/Dialogs/DeleteDialog/DeleteDialog";
 import { useFilter } from "#/components/Filter/Filter";
@@ -112,9 +114,20 @@ const GroupPage: FC = () => {
 
 			<div className="flex align-baseline justify-between w-full">
 				<SettingsHeader>
-					<SettingsHeaderTitle>
-						{groupData.display_name || groupData.name || "Unknown Group"}
-					</SettingsHeaderTitle>
+					<AvatarData
+						avatar={
+							<Avatar
+								src={groupData.avatar_url}
+								fallback={groupData.display_name || groupData.name}
+								size="lg"
+							/>
+						}
+						title={
+							<SettingsHeaderTitle>
+								{groupData.display_name || groupData.name || "Unknown Group"}
+							</SettingsHeaderTitle>
+						}
+					/>
 					<SettingsHeaderDescription>
 						Manage members for this group.
 					</SettingsHeaderDescription>