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

81
app/pages/profile/notifications.vue
View File

@@ -4,12 +4,22 @@ import {
MeDocument,
MyMessengerConnectionsDocument,
} from '~/composables/graphql/generated';
import {
messengerConnectionAvatarSrc,
messengerConnectionHandle,
messengerConnectionInitials,
messengerConnectionName,
} from '~/composables/useMessengerConnectionPresentation';
import { useMessengerStart } from '~/composables/useMessengerStart';
type MessengerItem = {
id: string;
type: 'TELEGRAM' | 'MAX';
isActive: boolean;
channelId: string;
displayName?: string | null;
username?: string | null;
avatarAvailable?: boolean | null;
};
const config = useRuntimeConfig();
@@ -63,6 +73,18 @@ const successText = computed(() =>
? 'Теперь этот Telegram привязан к вашему кабинету, и уведомления будут приходить в него.'
: 'Теперь этот Max привязан к вашему кабинету, и уведомления будут приходить в него.',
);
const successConnection = computed(() =>
successChannel.value === 'telegram' ? telegramConnection.value : maxConnection.value,
);
const successAvatarSrc = computed(() => messengerConnectionAvatarSrc(successConnection.value));
const successAvatarInitials = computed(() =>
messengerConnectionInitials(
successConnection.value,
profileInitials.value,
),
);
const successConnectionName = computed(() => messengerConnectionName(successConnection.value));
const successConnectionHandleValue = computed(() => messengerConnectionHandle(successConnection.value));
onMounted(() => {
if (showSuccess.value) {
@@ -92,18 +114,24 @@ async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
<div v-if="showSuccess" class="surface-card rounded-3xl border border-[#c7efd7] bg-[#f4fff8] p-5">
<div class="flex flex-col gap-4 md:flex-row md:items-center">
<div class="avatar placeholder">
<div v-if="successAvatarSrc" class="avatar">
<div class="h-18 w-18 rounded-full ring ring-[#c7efd7] ring-offset-2 ring-offset-white">
<img :src="successAvatarSrc" :alt="successConnectionName">
</div>
</div>
<div v-else class="avatar placeholder">
<div class="h-18 w-18 rounded-full bg-[#123824] text-xl font-bold text-white">
<span>{{ profileInitials }}</span>
<span>{{ successAvatarInitials }}</span>
</div>
</div>
<div class="space-y-1">
<div class="badge badge-success badge-outline">Успешно</div>
<h2 class="text-2xl font-extrabold text-[#0f2f20]">{{ successTitle }}</h2>
<p class="text-sm text-[#355947]">
{{ profileName }}
</p>
<div class="flex flex-wrap items-center gap-2 text-sm text-[#355947]">
<span class="font-semibold text-[#123824]">{{ successConnectionName }}</span>
<span v-if="successConnectionHandleValue">{{ successConnectionHandleValue }}</span>
</div>
<p class="text-sm text-[#355947]">
{{ successText }}
</p>
@@ -119,9 +147,27 @@ async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
<div class="mt-4 space-y-3">
<div class="rounded-2xl bg-[#f8fbf9] p-4 transition hover:shadow-md">
<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 rounded-2xl bg-white px-3 py-2">
<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>
<button
class="btn btn-secondary mt-3 w-full"
:class="{ 'btn-disabled pointer-events-none': !telegramConnectUrl }"
@@ -140,9 +186,22 @@ async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
<div class="rounded-2xl bg-[#f8fbf9] p-4 transition hover:shadow-md">
<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 rounded-2xl bg-white px-3 py-2">
<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>
<button
class="btn btn-accent mt-3 w-full"
:class="{ 'btn-disabled pointer-events-none': !maxConnectUrl }"