fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(profile): show real telegram avatars in messenger chips

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 18:36:25 +07:00
parent f2fb64a0b7
commit f941ba7192
9 changed files with 267 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/pages/notifications.vue
View File

@@ -6,6 +6,12 @@ import {
MyNotificationHistoryDocument,
SendTestMessengerMessageDocument,
} from '~/composables/graphql/generated';
import {
messengerConnectionAvatarSrc,
messengerConnectionHandle,
messengerConnectionInitials,
messengerConnectionName,
} from '~/composables/useMessengerConnectionPresentation';
import { useMessengerStart } from '~/composables/useMessengerStart';
const selectedChannel = ref<'TELEGRAM' | 'MAX'>('TELEGRAM');
@@ -117,15 +123,29 @@ async function sendTest() {
<div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div>
<div class="min-w-0">
<p class="font-semibold">Telegram</p>
<p class="text-sm opacity-80">
{{
telegramConnection
? `Подключен: ${telegramConnection.channelId}`
: 'Не подключен'
}}
</p>
<div v-if="telegramConnection" class="mt-3 flex items-center gap-3">
<div v-if="messengerConnectionAvatarSrc(telegramConnection)" class="avatar">
<div class="h-11 w-11 rounded-full">
<img :src="messengerConnectionAvatarSrc(telegramConnection)" :alt="messengerConnectionName(telegramConnection)">
</div>
</div>
<div v-else class="avatar placeholder">
<div class="h-11 w-11 rounded-full bg-[#123824] text-sm font-bold text-white">
<span>{{ messengerConnectionInitials(telegramConnection, 'TG') }}</span>
</div>
</div>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-[#123824]">
{{ messengerConnectionName(telegramConnection) }}
</p>
<p class="truncate text-xs text-[#5c7b69]">
{{ messengerConnectionHandle(telegramConnection) || 'Подключен' }}
</p>
</div>
</div>
<p v-else class="text-sm opacity-80">Не подключен</p>
</div>
<button
@@ -147,15 +167,24 @@ async function sendTest() {
<div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div>
<div class="min-w-0">
<p class="font-semibold">Max</p>
<p class="text-sm opacity-80">
{{
maxConnection
? `Подключен: ${maxConnection.channelId}`
: 'Не подключен'
}}
</p>
<div v-if="maxConnection" class="mt-3 flex items-center gap-3">
<div class="avatar placeholder">
<div class="h-11 w-11 rounded-full bg-[#2b7fff] text-sm font-bold text-white">
<span>{{ messengerConnectionInitials(maxConnection, 'MX') }}</span>
</div>
</div>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-[#123824]">
{{ messengerConnectionName(maxConnection) }}
</p>
<p class="truncate text-xs text-[#5c7b69]">
{{ messengerConnectionHandle(maxConnection) || 'Подключен' }}
</p>
</div>
</div>
<p v-else class="text-sm opacity-80">Не подключен</p>
</div>
<button