feat(notifications): switch messenger connect flow to bot links

app/pages/notifications.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { useMutation, useQuery } from '@vue/apollo-composable';
 import {
+  MeDocument,
   MyMessengerConnectionsDocument,
   MyNotificationHistoryDocument,
   SendTestMessengerMessageDocument,
 } from '~/composables/graphql/generated';
 
 const selectedChannel = ref<'TELEGRAM' | 'MAX'>('TELEGRAM');
-const channelId = ref('');
 const customMessage = ref('Тест канала уведомлений Fregat');
 const feedback = ref('');
+const config = useRuntimeConfig();
 
+const meQuery = useQuery(MeDocument);
 const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
 const historyQuery = useQuery(MyNotificationHistoryDocument, () => ({
   channel: selectedChannel.value,
@@ -33,11 +35,43 @@ const activeConnection = computed(() =>
   ),
 );
 
+const telegramConnection = computed(() =>
+  connectionsQuery.result.value?.myMessengerConnections?.find(
+    (item: { type: 'TELEGRAM' | 'MAX'; isActive: boolean; channelId: string }) =>
+      item.type === 'TELEGRAM' && item.isActive,
+  ),
+);
+
+const maxConnection = computed(() =>
+  connectionsQuery.result.value?.myMessengerConnections?.find(
+    (item: { type: 'TELEGRAM' | 'MAX'; isActive: boolean; channelId: string }) =>
+      item.type === 'MAX' && item.isActive,
+  ),
+);
+
+function buildBotConnectUrl(baseUrl: string) {
+  const email = meQuery.result.value?.me?.email?.trim().toLowerCase();
+  if (!email || !baseUrl) {
+    return '';
+  }
+
+  const payload = encodeURIComponent(`login:${email}`);
+  const separator = baseUrl.includes('?') ? '&' : '?';
+  return `${baseUrl}${separator}start=${payload}`;
+}
+
+const telegramConnectUrl = computed(() => buildBotConnectUrl(config.public.telegramBotUrl || ''));
+const maxConnectUrl = computed(() => buildBotConnectUrl(config.public.maxBotUrl || ''));
+
 async function sendTest() {
   feedback.value = '';
+  if (!activeConnection.value) {
+    feedback.value = `Канал ${selectedChannel.value} ещё не подключен. Сначала подключите его через бота.`;
+    return;
+  }
+
   const result = await sendTestMutation.mutate({
     type: selectedChannel.value,
-    channelId: channelId.value || undefined,
     message: customMessage.value || undefined,
   });
 
@@ -67,6 +101,62 @@ async function sendTest() {
 
     <div class="surface-card rounded-3xl p-5">
       <div class="space-y-4">
+        <h2 class="text-xl font-bold text-[#123824]">Подключение каналов</h2>
+
+        <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>
+              <p class="font-semibold">Telegram</p>
+              <p class="text-sm opacity-80">
+                {{
+                  telegramConnection
+                    ? `Подключен: ${telegramConnection.channelId}`
+                    : 'Не подключен'
+                }}
+              </p>
+            </div>
+
+            <a
+              :href="telegramConnectUrl || undefined"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-secondary"
+              :class="{ 'btn-disabled pointer-events-none': !telegramConnectUrl }"
+            >
+              {{ telegramConnection ? 'Переподключить Telegram' : 'Подключить Telegram' }}
+            </a>
+          </div>
+        </div>
+
+        <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>
+              <p class="font-semibold">Max</p>
+              <p class="text-sm opacity-80">
+                {{
+                  maxConnection
+                    ? `Подключен: ${maxConnection.channelId}`
+                    : 'Не подключен'
+                }}
+              </p>
+            </div>
+
+            <a
+              :href="maxConnectUrl || undefined"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-accent"
+              :class="{ 'btn-disabled pointer-events-none': !maxConnectUrl }"
+            >
+              {{ maxConnection ? 'Переподключить Max' : 'Подключить Max' }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="surface-card rounded-3xl p-5">
+      <div class="space-y-3">
         <div class="tabs tabs-boxed w-fit">
           <button
             class="tab"
@@ -91,15 +181,6 @@ async function sendTest() {
           </span>
         </p>
 
-        <label class="form-control">
-          <span class="label-text">Канал (опционально)</span>
-          <input
-            v-model="channelId"
-            class="input input-bordered border-[#d0e8d8] bg-white/80"
-            placeholder="если пусто, берется активный подключенный канал"
-          >
-        </label>
-
         <label class="form-control">
           <span class="label-text">Тестовое сообщение</span>
           <textarea v-model="customMessage" class="textarea textarea-bordered border-[#d0e8d8] bg-white/80" rows="3" />
@@ -107,7 +188,7 @@ async function sendTest() {
 
         <button
           class="btn w-fit border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-          :disabled="sendTestMutation.loading.value"
+          :disabled="sendTestMutation.loading.value || !activeConnection"
           @click="sendTest"
         >
           Отправить тест
@@ -116,11 +197,7 @@ async function sendTest() {
         <div v-if="feedback" class="alert" :class="feedback.startsWith('Ошибка') ? 'alert-error' : 'alert-success'">
           {{ feedback }}
         </div>
-      </div>
-    </div>
 
-    <div class="surface-card rounded-3xl p-5">
-      <div class="space-y-3">
         <h2 class="text-xl font-bold text-[#123824]">История по каналу {{ selectedChannel }}</h2>
         <div v-if="historyQuery.loading.value" class="alert border-0 bg-white/75">Загрузка истории...</div>
         <div v-else-if="(historyQuery.result.value?.myNotificationHistory?.length ?? 0) === 0" class="alert">