Добавлены кнопки мессенджеров (WhatsApp, Telegram, WeChat) в боковую панель чатов с переходом на соответствующие страницы

backend/communications/urls.py

@@ -22,6 +22,11 @@ urlpatterns = [
         name="start_private_chat"
     ),
     
+    # Messenger Views
+    path("messengers/whatsapp/", views.whatsapp_view, name="whatsapp"),
+    path("messengers/telegram/", views.telegram_view, name="telegram"),
+    path("messengers/wechat/", views.wechat_view, name="wechat"),
+    
     # API Endpoints
     # Chat management
     path("api/chat/create/", api_views.create_chat, name="api_create_chat"),

backend/communications/views.py

@@ -452,3 +452,38 @@ def chat_mark_read(request, pk: int):
     return JsonResponse(
         {"ok": True, "last_read_at": int(ts.timestamp() * 1000)}
     )
+
+
+# ===== Messenger Views =====
+
+@login_required
+def whatsapp_view(request):
+    """WhatsApp интеграция"""
+    from django.shortcuts import render
+    return render(request, 'communications/messengers/whatsapp.html', {
+        'messenger_name': 'WhatsApp',
+        'messenger_icon': 'bi-whatsapp',
+        'messenger_color': '#25D366'
+    })
+
+
+@login_required
+def telegram_view(request):
+    """Telegram интеграция"""
+    from django.shortcuts import render
+    return render(request, 'communications/messengers/telegram.html', {
+        'messenger_name': 'Telegram',
+        'messenger_icon': 'bi-telegram',
+        'messenger_color': '#0088cc'
+    })
+
+
+@login_required
+def wechat_view(request):
+    """WeChat интеграция"""
+    from django.shortcuts import render
+    return render(request, 'communications/messengers/wechat.html', {
+        'messenger_name': 'WeChat',
+        'messenger_icon': 'bi-wechat',
+        'messenger_color': '#09B83E'
+    })

backend/static/css/components/chat-list-enhanced.css

@@ -187,7 +187,39 @@
     color: white;
 }
 
-.chat-type-btn .badge {
+/* Мессенджеры - ссылки */
+.chat-type-btn[data-messenger] {
+    text-decoration: none;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.chat-type-btn[data-messenger]:hover {
+    background-color: var(--bs-light) !important;
+    transform: scale(1.05);
+}
+
+.chat-type-btn[data-messenger] i {
+    transition: transform 0.2s ease;
+}
+
+.chat-type-btn[data-messenger]:hover i {
+    transform: scale(1.1);
+}
+
+/* Цвета иконок мессенджеров */
+.chat-type-btn[data-messenger="whatsapp"] i {
+    color: #25D366 !important;
+}
+
+.chat-type-btn[data-messenger="telegram"] i {
+    color: #0088cc !important;
+}
+
+.chat-type-btn[data-messenger="wechat"] i {
+    color: #09B83E !important;
+}
+
+.chat-type-badge {
     position: absolute;
     top: 0.25rem;
     right: 0.25rem;

backend/templates/communications/chat_list.html

@@ -61,6 +61,23 @@
                 <i class="bi-megaphone fs-4 d-block"></i>
                 <span class="badge rounded-pill bg-secondary" data-count="announcement">0</span>
               </button>
+              
+              {# Разделитель #}
+              <div class="list-group-item p-0" style="height: 1px; background-color: var(--bs-border-color);"></div>
+              
+              {# Мессенджеры #}
+              <a href="{% url 'communications:whatsapp' %}" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
+                 title="WhatsApp" data-messenger="whatsapp">
+                <i class="bi-whatsapp fs-4 d-block text-success"></i>
+              </a>
+              <a href="{% url 'communications:telegram' %}" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
+                 title="Telegram" data-messenger="telegram">
+                <i class="bi-telegram fs-4 d-block text-primary"></i>
+              </a>
+              <a href="{% url 'communications:wechat' %}" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
+                 title="WeChat" data-messenger="wechat">
+                <i class="bi-wechat fs-4 d-block text-success"></i>
+              </a>
             </div>
           </div>
         </div>

backend/templates/communications/messengers/telegram.html

@@ -0,0 +1,102 @@
+{# backend/templates/communications/messengers/telegram.html #}
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ messenger_name }}{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
+<style>
+    .messenger-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .messenger-icon {
+        font-size: 6rem;
+        color: {{ messenger_color }};
+        margin-bottom: 2rem;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .messenger-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: {{ messenger_color }};
+        margin-bottom: 1rem;
+    }
+    
+    .messenger-description {
+        font-size: 1.2rem;
+        color: var(--bs-secondary);
+        max-width: 600px;
+        margin: 0 auto 2rem;
+    }
+    
+    .messenger-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .messenger-btn {
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    .messenger-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            {% include "includes/components/page_header.html" with icon=messenger_icon title=messenger_name %}
+            
+            <div class="card shadow-sm">
+                <div class="card-body messenger-container">
+                    <i class="{{ messenger_icon }} messenger-icon"></i>
+                    
+                    <h2 class="messenger-title">{{ messenger_name }} интеграция</h2>
+                    
+                    <p class="messenger-description">
+                        Здесь будет отображаться интеграция с {{ messenger_name }}. 
+                        Функционал находится в разработке.
+                    </p>
+                    
+                    <div class="messenger-actions">
+                        <a href="{% url 'communications:chat_list' %}" class="btn btn-outline-secondary messenger-btn">
+                            <i class="bi-arrow-left"></i> Вернуться к чатам
+                        </a>
+                        <button class="btn btn-primary messenger-btn" style="background-color: {{ messenger_color }}; border-color: {{ messenger_color }};" disabled>
+                            <i class="bi-link-45deg"></i> Подключить {{ messenger_name }}
+                        </button>
+                    </div>
+                    
+                    <div class="mt-5">
+                        <div class="alert alert-info d-inline-block">
+                            <i class="bi-info-circle"></i> Для настройки интеграции обратитесь к администратору
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

backend/templates/communications/messengers/wechat.html

@@ -0,0 +1,102 @@
+{# backend/templates/communications/messengers/wechat.html #}
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ messenger_name }}{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
+<style>
+    .messenger-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .messenger-icon {
+        font-size: 6rem;
+        color: {{ messenger_color }};
+        margin-bottom: 2rem;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .messenger-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: {{ messenger_color }};
+        margin-bottom: 1rem;
+    }
+    
+    .messenger-description {
+        font-size: 1.2rem;
+        color: var(--bs-secondary);
+        max-width: 600px;
+        margin: 0 auto 2rem;
+    }
+    
+    .messenger-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .messenger-btn {
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    .messenger-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            {% include "includes/components/page_header.html" with icon=messenger_icon title=messenger_name %}
+            
+            <div class="card shadow-sm">
+                <div class="card-body messenger-container">
+                    <i class="{{ messenger_icon }} messenger-icon"></i>
+                    
+                    <h2 class="messenger-title">{{ messenger_name }} интеграция</h2>
+                    
+                    <p class="messenger-description">
+                        Здесь будет отображаться интеграция с {{ messenger_name }}. 
+                        Функционал находится в разработке.
+                    </p>
+                    
+                    <div class="messenger-actions">
+                        <a href="{% url 'communications:chat_list' %}" class="btn btn-outline-secondary messenger-btn">
+                            <i class="bi-arrow-left"></i> Вернуться к чатам
+                        </a>
+                        <button class="btn btn-primary messenger-btn" style="background-color: {{ messenger_color }}; border-color: {{ messenger_color }};" disabled>
+                            <i class="bi-link-45deg"></i> Подключить {{ messenger_name }}
+                        </button>
+                    </div>
+                    
+                    <div class="mt-5">
+                        <div class="alert alert-info d-inline-block">
+                            <i class="bi-info-circle"></i> Для настройки интеграции обратитесь к администратору
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

backend/templates/communications/messengers/whatsapp.html

@@ -0,0 +1,102 @@
+{# backend/templates/communications/messengers/whatsapp.html #}
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ messenger_name }}{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
+<style>
+    .messenger-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .messenger-icon {
+        font-size: 6rem;
+        color: {{ messenger_color }};
+        margin-bottom: 2rem;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .messenger-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: {{ messenger_color }};
+        margin-bottom: 1rem;
+    }
+    
+    .messenger-description {
+        font-size: 1.2rem;
+        color: var(--bs-secondary);
+        max-width: 600px;
+        margin: 0 auto 2rem;
+    }
+    
+    .messenger-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .messenger-btn {
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    .messenger-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            {% include "includes/components/page_header.html" with icon=messenger_icon title=messenger_name %}
+            
+            <div class="card shadow-sm">
+                <div class="card-body messenger-container">
+                    <i class="{{ messenger_icon }} messenger-icon"></i>
+                    
+                    <h2 class="messenger-title">{{ messenger_name }} интеграция</h2>
+                    
+                    <p class="messenger-description">
+                        Здесь будет отображаться интеграция с {{ messenger_name }}. 
+                        Функционал находится в разработке.
+                    </p>
+                    
+                    <div class="messenger-actions">
+                        <a href="{% url 'communications:chat_list' %}" class="btn btn-outline-secondary messenger-btn">
+                            <i class="bi-arrow-left"></i> Вернуться к чатам
+                        </a>
+                        <button class="btn btn-primary messenger-btn" style="background-color: {{ messenger_color }}; border-color: {{ messenger_color }};" disabled>
+                            <i class="bi-link-45deg"></i> Подключить {{ messenger_name }}
+                        </button>
+                    </div>
+                    
+                    <div class="mt-5">
+                        <div class="alert alert-info d-inline-block">
+                            <i class="bi-info-circle"></i> Для настройки интеграции обратитесь к администратору
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}