обновлние дизайна чатов

src/views/ChatListView.vue

@@ -1,58 +1,117 @@
 <template>
-  <div class="chat-list-view container mt-4">
+  <div class="modern-chatlist-view">
-    <h2 class="text-center mb-4">Мои диалоги</h2>
+    <!-- Header Section -->
-
+    <div class="chatlist-header">
-    <div v-if="loading" class="d-flex justify-content-center my-5">
+      <div class="container">
-      <div class="spinner-border text-primary" role="status">
+        <div class="header-content">
-        <span class="visually-hidden">Загрузка диалогов...</span>
+          <div class="chatlist-title">
+            <h1 class="title-gradient">Мои диалоги</h1>
+            <p class="subtitle">Общение с вашими совпадениями</p>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div v-if="error" class="alert alert-danger text-center">
+    <!-- Loading State -->
-      {{ error }}
+    <div v-if="loading" class="loading-section">
+      <div class="loading-spinner">
+        <div class="spinner"></div>
+        <p>Загрузка диалогов...</p>
+      </div>
     </div>
 
-    <div v-if="!loading && conversations.length === 0 && !error" class="alert alert-info text-center">
+    <!-- Error State -->
-      У вас пока нет активных диалогов. <br>
+    <div v-if="error" class="error-section">
-      Возможно, стоит кого-нибудь лайкнуть, чтобы началось общение!
+      <div class="container">
+        <div class="error-card">
+          <i class="bi-exclamation-triangle"></i>
+          <h3>Ошибка загрузки</h3>
+          <p>{{ error }}</p>
+          <button class="retry-btn" @click="fetchConversations">Попробовать снова</button>
+        </div>
+      </div>
     </div>
 
-    <div v-if="!loading && conversations.length > 0 && !error" class="list-group">
+    <!-- Main Content -->
-      <router-link 
+    <div v-if="!loading && !error" class="main-content">
-        v-for="conversation in sortedConversations" 
+      <div class="container">
-        :key="conversation._id"
+        <!-- Empty State -->
-        :to="{ name: 'ChatView', params: { conversationId: conversation._id } }" 
+        <div v-if="conversations.length === 0" class="empty-state">
-        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 shadow-sm rounded"
+          <div class="empty-card">
-      >
+            <i class="bi-chat"></i>
-        <div class="d-flex align-items-center">
+            <h3>У вас пока нет активных диалогов</h3>
-          <!-- === ОТОБРАЖЕНИЕ ФОТО/ЗАГЛУШКИ === -->
+            <p>Лайкните кого-нибудь, чтобы начать общение!</p>
-          <div class="image-placeholder-container me-3">
+            <router-link to="/swipe" class="action-btn primary">Перейти к свайпам</router-link>
-            <img 
+          </div>
-              v-if="getOtherParticipant(conversation.participants)?.mainPhotoUrl"
+        </div>
-              :src="getParticipantAvatar(getOtherParticipant(conversation.participants))"
+
-              alt="Avatar"
+        <!-- Conversations List Card -->
-              class="rounded-circle user-photo" 
+        <div v-if="conversations.length > 0" class="chat-card">
-              @error="onImageError($event, getOtherParticipant(conversation.participants))"
+          <div class="card-header">
-            />
+            <h3><i class="bi-chat-dots-fill"></i> Активные диалоги</h3>
-            <div v-else class="no-photo-placeholder rounded-circle d-flex align-items-center justify-content-center">
+            <div class="header-actions">
-              <i class="bi bi-person-fill"></i>
+              <span class="chat-count">{{ conversations.length }} {{ getDialogsCountText(conversations.length) }}</span>
             </div>
           </div>
-          <!-- ================================ -->
+          
-          <div>
+          <div class="card-content">
-            <h5 class="mb-1">{{ getOtherParticipant(conversation.participants)?.name || 'Неизвестный пользователь' }}</h5>
+            <!-- Conversations Container -->
-            <small class="text-muted last-message-text">
+            <div class="conversations-container">
-              {{ conversation.lastMessage ? formatLastMessage(conversation.lastMessage) : 'Нет сообщений' }}
+              <router-link 
-            </small>
+                v-for="conversation in sortedConversations" 
+                :key="conversation._id"
+                :to="{ name: 'ChatView', params: { conversationId: conversation._id } }" 
+                class="conversation-card"
+                :class="{'has-unread': getUnreadCount(conversation) > 0}"
+              >
+                <!-- User Photo -->
+                <div class="user-photo-container">
+                  <img 
+                    v-if="getOtherParticipant(conversation.participants)?.mainPhotoUrl"
+                    :src="getParticipantAvatar(getOtherParticipant(conversation.participants))"
+                    :alt="getOtherParticipant(conversation.participants)?.name || 'Фото пользователя'"
+                    class="user-photo" 
+                    @error="onImageError($event, getOtherParticipant(conversation.participants))"
+                  />
+                  <div v-else class="user-photo-placeholder">
+                    <i class="bi-person"></i>
+                  </div>
+                  <span v-if="getUnreadCount(conversation) > 0" class="unread-badge">
+                    {{ getUnreadCount(conversation) }}
+                  </span>
+                </div>
+                
+                <!-- Conversation Info -->
+                <div class="conversation-info">
+                  <div class="conversation-header">
+                    <h3 class="user-name">{{ getOtherParticipant(conversation.participants)?.name || 'Неизвестный пользователь' }}</h3>
+                    <span class="timestamp">{{ formatTimestamp(conversation.lastMessage?.createdAt || conversation.updatedAt) }}</span>
+                  </div>
+                  <p class="last-message" :class="{'unread': getUnreadCount(conversation) > 0}">
+                    {{ conversation.lastMessage ? formatLastMessage(conversation.lastMessage) : 'Нет сообщений' }}
+                  </p>
+                </div>
+                
+                <div class="conversation-action">
+                  <i class="bi-chevron-right"></i>
+                </div>
+              </router-link>
+            </div>
           </div>
         </div>
-        <div class="text-end">
+      </div>
-          <small class="text-muted d-block">{{ formatTimestamp(conversation.updatedAt) }}</small>
+    </div>
-          <span v-if="getUnreadCount(conversation) > 0" class="badge bg-primary rounded-pill unread-indicator">
+
-            {{ getUnreadCount(conversation) }}
+    <!-- No Data State -->
-          </span>
+    <div v-if="!isAuthenticated && !loading" class="not-authenticated-section">
+      <div class="container">
+        <div class="error-card">
+          <i class="bi-person-lock"></i>
+          <h3>Доступ ограничен</h3>
+          <p>Пожалуйста, войдите в систему, чтобы просматривать диалоги.</p>
+          <router-link to="/login" class="action-btn primary">Войти в систему</router-link>
         </div>
-      </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -62,7 +121,7 @@ import { ref, onMounted, computed, onUnmounted } from 'vue';
 import api from '@/services/api';
 import { useAuth } from '@/auth'; // Для получения ID текущего пользователя
 import router from '@/router';   // Если понадобится редирект
-import { getSocket, connectSocket } from '@/services/socketService'; // ИСПРАВЛЕННЫЙ ПУТЬ
+import { getSocket, connectSocket } from '@/services/socketService';
 
 const { user: currentUser, isAuthenticated } = useAuth(); // Получаем текущего пользователя
 
@@ -114,7 +173,7 @@ const getUnreadCount = (conversation) => {
   // Fallback к старой логике, если новый счетчик 0 (или не инициализирован для старых чатов),
   // но lastMessage не прочитано текущим пользователем.
   if (currentUser.value && conversation.lastMessage && 
-      conversation.lastMessage.sender?._id !== currentUser.value?._id && 
+      conversation.lastMessage.sender?._id !== currentUser.value._id && 
       (!conversation.lastMessage.readBy || !conversation.lastMessage.readBy.includes(currentUser.value._id))) {
     return 1; // Показываем, что есть хотя бы одно непрочитанное (последнее)
   }
@@ -148,6 +207,7 @@ const formatLastMessage = (lastMsg) => {
 // Форматирование времени последнего сообщения/обновления
 const formatTimestamp = (timestamp) => {
   if (!timestamp) return '';
+  
   const date = new Date(timestamp);
   const today = new Date();
   const yesterday = new Date(today);
@@ -166,14 +226,8 @@ const onImageError = (event, participantOnError) => {
   console.warn("[ChatListView] Не удалось загрузить изображение:", event.target.src, "для пользователя:", participantOnError?.name);
   // Устанавливаем src на заглушку из public/img, если фото не загрузилось.
   // Это для случая, когда mainPhotoUrl был, но оказался битым.
-  // Если mainPhotoUrl изначально не было, сработает v-else с иконкой.
   event.target.src = defaultAvatar;
-  // Можно добавить класс, чтобы скрыть img и показать div-заглушку, если это необходимо,
+  
-  // но обычно @error на img и последующая замена src на defaultAvatar достаточны.
-  // Однако, для консистенции с SwipeView, лучше убедиться, что заглушка-иконка показывается.
-  // Для этого можно попробовать скрыть img и показать соседний div с иконкой,
-  // но это усложнит логику, так как v-if/v-else уже управляют этим.
-  // Простейший вариант - просто заменить на defaultAvatar.png.
   // Если хотим именно иконку, то нужно будет менять состояние, чтобы v-else сработало.
   // Например, установить participantOnError.mainPhotoUrl = null;
   // Это вызовет обновление DOM и показ блока v-else.
@@ -203,6 +257,8 @@ const handleMessagesReadInList = ({ conversationId: readConversationId, readerId
     const conv = conversations.value[convIndex];
     // Если Я (currentUser) прочитал сообщения собеседника в этом диалоге
     if (readerId === currentUser.value?._id && conv.lastMessage && conv.lastMessage.sender?._id !== currentUser.value?._id) {
+      // Очищаем счетчик непрочитанных для этого диалога
+      unreadMessageCounts.value[readConversationId] = 0;
       if (!conv.lastMessage.readBy) conv.lastMessage.readBy = [];
       if (!conv.lastMessage.readBy.includes(readerId)) {
         conv.lastMessage.readBy.push(readerId);
@@ -213,6 +269,7 @@ const handleMessagesReadInList = ({ conversationId: readConversationId, readerId
     // Если Собеседник прочитал НАШИ сообщения (это больше для ChatView, но если хотим обновить тут что-то)
     // В данном контексте (список чатов), это событие в основном означает, что МЫ прочитали,
     // и если у нас был индикатор непрочитанных от собеседника, он должен исчезнуть.
+    
     // Перезапрос fetchConversations() может быть слишком тяжелым.
     // Лучше, если сервер присылает обновленный объект диалога или мы мутируем локально.
     console.log(`[ChatListView] Messages read in conversation ${readConversationId}, reader: ${readerId}. Updating UI.`);
@@ -312,58 +369,433 @@ onUnmounted(() => {
     socket.off('getMessage'); 
   }
 });
+
+// Функция для определения правильного склонения слова "диалог"
+const getDialogsCountText = (count) => {
+  const remainder10 = count % 10;
+  const remainder100 = count % 100;
+  
+  if (remainder10 === 1 && remainder100 !== 11) {
+    return 'диалог';
+  } else if ([2, 3, 4].includes(remainder10) && ![12, 13, 14].includes(remainder100)) {
+    return 'диалога';
+  } else {
+    return 'диалогов';
+  }
+};
 </script>
 
 <style scoped>
-.chat-list-view {
+/* Global Reset and Base Styles */
-  max-width: 800px;
+.modern-chatlist-view {
-  margin: auto;
+  min-height: 100vh;
-}
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-.list-group-item {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  transition: background-color 0.2s ease-in-out;
+  margin: 0;
-}
+  padding: 0;
-.list-group-item:hover {
+  width: 100%;
-  background-color: #f8f9fa;
+  overflow-x: hidden;
-}
-.last-message-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;  
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.9em;
-  line-clamp: 1; /* Стандартное свойство */
 }
 
-.image-placeholder-container {
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 20px;
+  width: 100%;
+}
+
+/* Header Section */
+.chatlist-header {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 2rem 0;
+  color: white;
+  width: 100%;
+  margin: 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.chatlist-title h1 {
+  margin: 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(45deg, #fff, #f0f0f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.chatlist-title .subtitle {
+  margin: 0.5rem 0 0 0;
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+/* Loading State */
+.loading-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  color: white;
+}
+
+.loading-spinner {
+  text-align: center;
+}
+
+.spinner {
   width: 50px;
   height: 50px;
-  position: relative;
+  border: 4px solid rgba(255, 255, 255, 0.3);
-  background-color: #e9ecef; /* Фон для контейнера, если фото не покроет его полностью или для заглушки */
+  border-left: 4px solid white;
-  border-radius: 50%; /* Делаем контейнер круглым */
+  border-radius: 50%;
-  overflow: hidden; /* Обрезаем все, что выходит за круглые границы */
+  animation: spin 1s linear infinite;
+  margin: 0 auto 1rem;
 }
 
-.user-photo, .no-photo-placeholder {
+@keyframes spin {
-  position: absolute;
+  0% { transform: rotate(0deg); }
-  top: 0;
+  100% { transform: rotate(360deg); }
-  left: 0;
+}
+
+/* Error and Not Authenticated Sections */
+.error-section, .not-authenticated-section {
+  padding: 4rem 0;
+}
+
+.error-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 3rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.error-card i {
+  font-size: 3rem;
+  color: #dc3545;
+  margin-bottom: 1rem;
+}
+
+.error-card h3 {
+  color: #495057;
+  margin-bottom: 1rem;
+}
+
+.retry-btn, .action-btn {
+  display: inline-block;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: 50px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.retry-btn:hover, .action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Main Content */
+.main-content {
+  padding: 2rem 0 4rem;
+}
+
+/* Chat Card (New) */
+.chat-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.card-header {
+  padding: 1.5rem 2rem;
+  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #dee2e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header h3 {
+  margin: 0;
+  color: #495057;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.chat-count {
+  font-size: 0.9rem;
+  color: #6c757d;
+  display: flex;
+  align-items: center;
+  padding: 0.3rem 0.8rem;
+  background: #f1f3f5;
+  border-radius: 30px;
+}
+
+.card-content {
+  padding: 1rem;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.empty-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 3rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  max-width: 500px;
+  width: 100%;
+}
+
+.empty-card i {
+  font-size: 3rem;
+  color: #6c757d;
+  margin-bottom: 1rem;
+}
+
+.empty-card h3 {
+  color: #495057;
+  margin-bottom: 1rem;
+}
+
+.empty-card p {
+  color: #6c757d;
+  margin-bottom: 1.5rem;
+}
+
+/* Conversations Container */
+.conversations-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Conversation Card */
+.conversation-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: white;
+  border-radius: 16px;
+  padding: 1rem;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  position: relative;
+}
+
+.conversation-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
+  background: #f9faff;
+}
+
+.conversation-card.has-unread {
+  background-color: rgba(102, 126, 234, 0.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+}
+
+/* User Photo */
+.user-photo-container {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border: 3px solid white;
+  background: linear-gradient(45deg, #e9ecef, #f8f9fa);
+}
+
+.user-photo {
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Для img */
+  object-fit: cover;
+  transition: transform 0.3s ease;
 }
 
-.no-photo-placeholder i {
+.conversation-card:hover .user-photo {
-  font-size: 2.5rem; /* Размер иконки, подберите по вкусу для 50px контейнера */
+  transform: scale(1.1);
+}
+
+.user-photo-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e9ecef, #f8f9fa);
+  transition: background 0.3s ease;
+}
+
+.conversation-card:hover .user-photo-placeholder {
+  background: linear-gradient(135deg, #dce1fc, #e9ecef);
+}
+
+.user-photo-placeholder i {
+  font-size: 1.8rem;
   color: #adb5bd;
 }
 
-.list-group-item .badge {
+.unread-badge {
-  font-size: 0.8em;
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 700;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+  animation: pulse 2s infinite;
 }
 
-.unread-indicator {
+@keyframes pulse {
-  /* Можно сделать более заметным, например, жирным шрифтом или цветом */
+  0% {
-  font-weight: bold;
+    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(102, 126, 234, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
+  }
+}
+
+/* Conversation Action */
+.conversation-action {
+  margin-left: auto;
+  color: #ced4da;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.conversation-card:hover .conversation-action {
+  color: #667eea;
+  transform: translateX(3px);
+}
+
+/* Conversation Info */
+.conversation-info {
+  flex-grow: 1;
+  min-width: 0; /* Для корректного переноса текста */
+}
+
+.conversation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.user-name {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 80px); /* Оставляем место для timestamp */
+}
+
+.conversation-card.has-unread .user-name {
+  color: #667eea;
+}
+
+.timestamp {
+  font-size: 0.8rem;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.last-message {
+  margin: 0;
+  font-size: 0.95rem;
+  color: #6c757d;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.last-message.unread {
+  font-weight: 600;
+  color: #495057;
+}
+
+/* Responsive */
+@media (max-width: 576px) {
+  .chatlist-title h1 {
+    font-size: 2rem;
+  }
+  
+  .card-header {
+    padding: 1.25rem 1.5rem;
+  }
+
+  .card-content {
+    padding: 0.75rem;
+  }
+  
+  .conversation-card {
+    padding: 0.75rem;
+  }
+  
+  .user-photo-container {
+    width: 50px;
+    height: 50px;
+  }
+
+  .user-name {
+    font-size: 1rem;
+  }
 }
 </style>