Render telegram avatars in user cards

app/composables/graphql/generated.ts

@@ -196,6 +196,7 @@ export type ManagerUser = {
   lastOrderAt?: Maybe<Scalars['DateTime']['output']>;
   orderCount: Scalars['Int']['output'];
   role: UserRole;
+  telegramConnection?: Maybe<MessengerConnection>;
 };
 
 export type ManagerWithdrawalRequest = {
@@ -849,7 +850,7 @@ export type ManagerOrdersQuery = { __typename?: 'Query', managerOrders: Array<{
 export type ManagerUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string }> };
+export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };
 
 export type ManagerWithdrawalRequestsQueryVariables = Exact<{
   status?: InputMaybe<WithdrawalStatus>;
@@ -1737,6 +1738,14 @@ export const ManagerUsersDocument = gql`
   managerUsers {
     id
     fullName
+    telegramConnection {
+      id
+      type
+      channelId
+      displayName
+      username
+      avatarAvailable
+    }
   }
 }
     `;

app/pages/clients/index.vue

@@ -6,6 +6,7 @@ import {
   type ManagerUsersQuery,
   type RegistrationRequestsQuery,
 } from '~/composables/graphql/generated';
+import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
 
 definePageMeta({
   middleware: ['manager-only'],
@@ -150,7 +151,16 @@ function userInitials(fullName: string) {
           class="surface-card flex min-h-[280px] flex-col rounded-[32px] p-6"
         >
           <div class="flex justify-center">
-            <div class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]">
+            <img
+              v-if="messengerConnectionAvatarSrc(user.telegramConnection)"
+              :src="messengerConnectionAvatarSrc(user.telegramConnection)"
+              :alt="user.fullName"
+              class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
+            >
+            <div
+              v-else
+              class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
+            >
               {{ userInitials(user.fullName) }}
             </div>
           </div>

graphql/operations/manager/manager-users.graphql

@@ -2,5 +2,13 @@ query ManagerUsers {
   managerUsers {
     id
     fullName
+    telegramConnection {
+      id
+      type
+      channelId
+      displayName
+      username
+      avatarAvailable
+    }
   }
 }

graphql/schema.graphql

@@ -147,6 +147,7 @@ type ManagerUser {
   createdAt: DateTime!
   orderCount: Int!
   lastOrderAt: DateTime
+  telegramConnection: MessengerConnection
 }
 
 type MessengerConnection {