Channels UI + read/unread + unique views + style polish

shine-UI/js/pages/messages-list.js

@@ -1,4 +1,4 @@
-import { renderHeader } from '../components/header.js';
+import { renderHeader } from '../components/header.js';
 import { directMessages } from '../mock-data.js';
 import {
   getChatMessages,
@@ -13,7 +13,7 @@ export const pageMeta = { id: 'messages-list', title: 'Личные сообще
 
 export function render({ navigate }) {
   const screen = document.createElement('section');
-  screen.className = 'stack';
+  screen.className = 'stack dm-screen dm-list-screen';
 
   screen.append(
     renderHeader({
@@ -24,14 +24,11 @@ export function render({ navigate }) {
   );
 
   const list = document.createElement('div');
-  list.className = 'stack';
-  const status = document.createElement('div');
-  status.className = 'status-line';
-  status.textContent = 'Загрузка списка сообщений...';
+  list.className = 'stack dm-list';
 
   function renderRow(item) {
     const row = document.createElement('article');
-    row.className = 'list-item';
+    row.className = 'list-item dm-dialog-card';
     row.innerHTML = `
       <div class="avatar">${item.initials}</div>
       <div>
@@ -56,6 +53,7 @@ export function render({ navigate }) {
       const contacts = relations.outContacts || [];
       setContacts(contacts);
       list.innerHTML = '';
+
       const contactRows = contacts.map((login) => {
         const preview = directMessages.find((item) => item.id.toLowerCase() === login.toLowerCase());
         const chat = getChatMessages(login);
@@ -100,19 +98,13 @@ export function render({ navigate }) {
         empty.className = 'card meta-muted';
         empty.textContent = 'Пока нет ни контактов, ни сообщений';
         list.append(empty);
-        status.className = 'status-line is-available';
-        status.textContent = 'Нет диалогов.';
         return;
       }
 
       rows.forEach((item) => list.append(renderRow(item)));
-      status.className = 'status-line is-available';
-      status.textContent = `Загружено диалогов: ${rows.length}`;
     } catch (error) {
       if (isSessionInvalidError(error)) {
         list.innerHTML = '';
-        status.className = 'status-line is-unavailable';
-        status.textContent = 'Сессия устарела.';
 
         const card = document.createElement('div');
         card.className = 'card stack';
@@ -145,12 +137,10 @@ export function render({ navigate }) {
       fail.className = 'card meta-muted';
       fail.textContent = `Не удалось загрузить сообщения: ${error.message || 'unknown'}`;
       list.append(fail);
-      status.className = 'status-line is-unavailable';
-      status.textContent = 'Список недоступен.';
     }
   }
 
-  screen.append(status, list);
+  screen.append(list);
   loadList();
   return screen;
 }