From 868dcf3270dceeffa24c73a4890a20e9e525bebe Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 6 Apr 2026 20:46:01 +0700
Subject: [PATCH] Simplify notifications settings layout

---
 app/pages/profile/notifications.vue | 194 +++++++++-------------------
 1 file changed, 61 insertions(+), 133 deletions(-)

diff --git a/app/pages/profile/notifications.vue b/app/pages/profile/notifications.vue
index 92a6ce1..9bd877f 100644
--- a/app/pages/profile/notifications.vue
+++ b/app/pages/profile/notifications.vue
@@ -28,8 +28,6 @@ type MessengerItem = {
 type MessengerOption = {
   channel: MessengerChannel;
   label: string;
-  title: string;
-  description: string;
   buttonClass: string;
   iconClass: string;
   unavailableText: string;
@@ -58,8 +56,6 @@ const messengerOptions: MessengerOption[] = [
   {
     channel: 'TELEGRAM',
     label: 'Telegram',
-    title: 'Подключить Telegram',
-    description: 'Получайте статусы заказов и сервисные уведомления в Telegram.',
     buttonClass: 'bg-[#1a9c63] text-white hover:bg-[#148553]',
     iconClass: 'bg-[#123824] text-white',
     unavailableText: 'Telegram пока не настроен в окружении фронта.',
@@ -67,8 +63,6 @@ const messengerOptions: MessengerOption[] = [
   {
     channel: 'MAX',
     label: 'MAX',
-    title: 'Подключить MAX',
-    description: 'Открывает MAX-бота и привязывает аккаунт к личному кабинету.',
     buttonClass: 'bg-[#2b7fff] text-white hover:bg-[#1d6df1]',
     iconClass: 'bg-[#2b7fff] text-white',
     unavailableText: 'MAX пока не настроен в окружении фронта.',
@@ -144,8 +138,8 @@ async function removeConnection(connectionId: string) {
 
     <div class="space-y-2">
       <h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>
-      <p class="max-w-3xl text-sm leading-6 text-[#466653]">
-        Подключите удобные мессенджеры, чтобы получать статусы заказов и важные уведомления без лишних переходов в кабинет.
+      <p class="text-sm leading-6 text-[#466653]">
+        Подключите мессенджер, чтобы получать уведомления по заказам.
       </p>
     </div>
 
@@ -159,44 +153,80 @@ async function removeConnection(connectionId: string) {
       {{ feedback }}
     </div>
 
-    <div
-      v-if="activeConnections.length === 0"
-      class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8"
-    >
-      <div class="space-y-3">
-        <h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Подключите мессенджеры</h2>
-        <p class="max-w-3xl text-sm leading-6 text-[#557562]">
-          Вы можете подключить любой из мессенджеров ниже. После подключения уведомления о заказах и важных действиях будут приходить прямо туда.
-        </p>
+    <div class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8">
+      <div
+        v-if="activeConnections.length > 0"
+        class="space-y-4"
+      >
+        <article
+          v-for="{ option, connection } in activeConnections"
+          :key="connection!.id"
+          class="rounded-[28px] bg-white px-5 py-4 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
+        >
+          <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div class="flex min-w-0 items-center gap-4">
+              <div v-if="messengerConnectionAvatarSrc(connection)" class="avatar">
+                <div class="h-14 w-14 rounded-[20px]">
+                  <img :src="messengerConnectionAvatarSrc(connection)" :alt="messengerConnectionName(connection)">
+                </div>
+              </div>
+              <div
+                v-else
+                class="flex h-14 w-14 items-center justify-center rounded-[20px] text-sm font-black"
+                :class="option.iconClass"
+              >
+                {{ messengerConnectionInitials(connection, option.channel === 'TELEGRAM' ? 'TG' : 'MX') }}
+              </div>
+
+              <div class="min-w-0">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ option.label }}</p>
+                <p class="truncate text-lg font-bold text-[#123824]">{{ messengerConnectionName(connection) }}</p>
+                <p class="truncate text-sm text-[#557562]">{{ messengerConnectionHandle(connection) || connection.channelId }}</p>
+              </div>
+            </div>
+
+            <button
+              class="btn rounded-full border border-[#e5cfc7] bg-[#fff5f1] px-5 text-[#a64d2d] hover:border-[#deb5a8] hover:bg-[#ffe8e0]"
+              :disabled="deleteConnectionMutation.loading.value"
+              @click="removeConnection(connection!.id)"
+            >
+              {{ deleteConnectionMutation.loading.value ? 'Отключаем...' : 'Отключить' }}
+            </button>
+          </div>
+        </article>
       </div>
 
-      <div class="mt-6 grid gap-4 md:grid-cols-2">
+      <p
+        v-else
+        class="text-sm leading-6 text-[#557562]"
+      >
+        Пока ничего не подключено.
+      </p>
+
+      <div
+        v-if="availableOptions.length > 0"
+        class="mt-6 grid gap-4 md:grid-cols-2"
+      >
         <button
-          v-for="option in messengerOptions"
+          v-for="option in availableOptions"
           :key="option.channel"
-          class="flex min-h-[120px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
+          class="flex min-h-[104px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
           :class="[option.buttonClass, { 'opacity-60': !connectUrl(option.channel) }]"
           :disabled="pendingChannel === option.channel || !connectUrl(option.channel)"
           @click="connectMessenger(option.channel)"
         >
-          <div class="space-y-2">
-            <div class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-white/18 text-sm font-black text-white">
-              {{ option.channel === 'TELEGRAM' ? 'TG' : 'MX' }}
-            </div>
-            <div>
-              <p class="text-lg font-black tracking-[-0.03em]">{{ option.title }}</p>
-              <p class="mt-1 text-sm text-white/82">{{ option.description }}</p>
-            </div>
+          <div class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-white/18 text-sm font-black text-white">
+            {{ option.channel === 'TELEGRAM' ? 'TG' : 'MX' }}
           </div>
-          <p class="text-sm font-semibold text-white/90">
-            {{ pendingChannel === option.channel ? `Открываем ${option.label}...` : `Перейти в ${option.label}` }}
+          <p class="text-sm font-semibold text-white">
+            {{ pendingChannel === option.channel ? `Открываем ${option.label}...` : `Подключить ${option.label}` }}
           </p>
         </button>
       </div>
 
       <div class="mt-4 space-y-2">
         <p
-          v-for="option in messengerOptions.filter((item) => !connectUrl(item.channel))"
+          v-for="option in availableOptions.filter((item) => !connectUrl(item.channel))"
           :key="`${option.channel}-hint`"
           class="text-sm text-[#8b5a49]"
         >
@@ -204,107 +234,5 @@ async function removeConnection(connectionId: string) {
         </p>
       </div>
     </div>
-
-    <template v-else>
-      <div class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8">
-        <div class="space-y-3">
-          <h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Подключенные аккаунты</h2>
-          <p class="text-sm leading-6 text-[#557562]">
-            Здесь показаны активные мессенджеры, привязанные к вашему кабинету.
-          </p>
-        </div>
-
-        <div class="mt-6 space-y-4">
-          <article
-            v-for="{ option, connection } in activeConnections"
-            :key="connection!.id"
-            class="rounded-[28px] bg-white px-5 py-4 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
-          >
-            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div class="flex min-w-0 items-center gap-4">
-                <div v-if="messengerConnectionAvatarSrc(connection)" class="avatar">
-                  <div class="h-14 w-14 rounded-[20px]">
-                    <img :src="messengerConnectionAvatarSrc(connection)" :alt="messengerConnectionName(connection)">
-                  </div>
-                </div>
-                <div
-                  v-else
-                  class="flex h-14 w-14 items-center justify-center rounded-[20px] text-sm font-black"
-                  :class="option.iconClass"
-                >
-                  {{ messengerConnectionInitials(connection, option.channel === 'TELEGRAM' ? 'TG' : 'MX') }}
-                </div>
-
-                <div class="min-w-0">
-                  <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ option.label }}</p>
-                  <p class="truncate text-lg font-bold text-[#123824]">{{ messengerConnectionName(connection) }}</p>
-                  <p class="truncate text-sm text-[#557562]">{{ messengerConnectionHandle(connection) || connection.channelId }}</p>
-                </div>
-              </div>
-
-              <button
-                class="btn rounded-full border border-[#e5cfc7] bg-[#fff5f1] px-5 text-[#a64d2d] hover:border-[#deb5a8] hover:bg-[#ffe8e0]"
-                :disabled="deleteConnectionMutation.loading.value"
-                @click="removeConnection(connection!.id)"
-              >
-                {{ deleteConnectionMutation.loading.value ? 'Удаляем...' : 'Удалить' }}
-              </button>
-            </div>
-          </article>
-        </div>
-      </div>
-
-      <div
-        v-if="availableOptions.length > 0"
-        class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8"
-      >
-        <div class="space-y-3">
-          <h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Можно подключить еще</h2>
-          <p class="text-sm leading-6 text-[#557562]">
-            Добавьте второй канал, чтобы не потерять уведомления, если один мессенджер недоступен.
-          </p>
-        </div>
-
-        <div class="mt-6 grid gap-4 md:grid-cols-2">
-          <button
-            v-for="option in availableOptions"
-            :key="option.channel"
-            class="flex min-h-[112px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
-            :class="[option.buttonClass, { 'opacity-60': !connectUrl(option.channel) }]"
-            :disabled="pendingChannel === option.channel || !connectUrl(option.channel)"
-            @click="connectMessenger(option.channel)"
-          >
-            <div>
-              <p class="text-lg font-black tracking-[-0.03em]">{{ option.title }}</p>
-              <p class="mt-2 text-sm text-white/82">{{ option.description }}</p>
-            </div>
-            <p class="text-sm font-semibold text-white/90">
-              {{ pendingChannel === option.channel ? `Открываем ${option.label}...` : `Подключить ${option.label}` }}
-            </p>
-          </button>
-        </div>
-
-        <div class="mt-4 space-y-2">
-          <p
-            v-for="option in availableOptions.filter((item) => !connectUrl(item.channel))"
-            :key="`${option.channel}-connected-hint`"
-            class="text-sm text-[#8b5a49]"
-          >
-            {{ option.unavailableText }}
-          </p>
-        </div>
-      </div>
-
-      <div
-        v-else
-        class="rounded-[32px] bg-[linear-gradient(135deg,#123824_0%,#1a5635_100%)] p-6 text-white md:p-8"
-      >
-        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/65">Готово</p>
-        <h2 class="mt-3 text-2xl font-black tracking-[-0.03em]">Оба канала подключены</h2>
-        <p class="mt-2 max-w-3xl text-sm leading-6 text-white/78">
-          Теперь важные уведомления будут доступны и в Telegram, и в MAX. Если захотите сменить аккаунт, удалите текущий и подключите новый.
-        </p>
-      </div>
-    </template>
   </section>
 </template>