channels ux cleanup and create-flow recovery

shine-UI/js/pages/add-channel-view.js

@@ -3,6 +3,7 @@ import { authService, state } from '../state.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import {
   channelNameErrorText,
+  normalizeChannelDescription,
   normalizeChannelDisplayName,
   validateChannelDisplayName,
 } from '../services/channel-name-rules.js';
@@ -19,6 +20,15 @@ function persistCreateSuccessFlash(message) {
   }
 }
 
+function validateDescription(value) {
+  const normalized = normalizeChannelDescription(value);
+  const bytes = new TextEncoder().encode(normalized).length;
+  if (bytes > 200) {
+    return { ok: false, normalized, bytes, error: 'Описание слишком длинное: максимум 200 байт UTF-8.' };
+  }
+  return { ok: true, normalized, bytes, error: '' };
+}
+
 export function render({ navigate }) {
   const screen = document.createElement('section');
   screen.className = 'stack channels-screen channels-screen--add';
@@ -27,7 +37,7 @@ export function render({ navigate }) {
     renderHeader({
       title: 'Создать канал',
       leftAction: { label: '<', onClick: () => navigate('channels-list') },
-    })
+    }),
   );
 
   const form = document.createElement('form');
@@ -35,9 +45,17 @@ export function render({ navigate }) {
   form.innerHTML = `
     <strong class="channel-head-title">Создание канала</strong>
     <p class="channel-head-meta">Можно использовать кириллицу, латиницу, цифры, пробел, _ и -.</p>
-    <p class="channel-head-meta">Длина: от 3 до 32 символов. Название уникально во всей системе.</p>
+    <p class="channel-head-meta">Длина названия: от 3 до 32 символов. Название уникально во всей системе.</p>
+
     <label for="channel-name">Название канала</label>
     <input id="channel-name" class="input" maxlength="64" placeholder="Например: Поток силы" required />
+    <div id="channel-name-error" class="meta-muted inline-error"></div>
+
+    <label for="channel-description">Описание канала (необязательно)</label>
+    <textarea id="channel-description" class="input" rows="4" maxlength="400" placeholder="Коротко о канале, до 200 байт UTF-8"></textarea>
+    <div class="meta-muted" id="channel-description-counter">0 / 200 байт</div>
+    <div id="channel-description-error" class="meta-muted inline-error"></div>
+
     <div id="channel-create-error" class="meta-muted inline-error"></div>
     <div class="form-actions-grid">
       <button type="button" class="secondary-btn" id="cancel-create-channel">Отмена</button>
@@ -45,7 +63,11 @@ export function render({ navigate }) {
     </div>
   `;
 
-  const inputEl = form.querySelector('#channel-name');
+  const nameEl = form.querySelector('#channel-name');
+  const descriptionEl = form.querySelector('#channel-description');
+  const nameErrorEl = form.querySelector('#channel-name-error');
+  const descriptionErrorEl = form.querySelector('#channel-description-error');
+  const descriptionCounterEl = form.querySelector('#channel-description-counter');
   const errorEl = form.querySelector('#channel-create-error');
   const submitEl = form.querySelector('#submit-create-channel');
   const cancelEl = form.querySelector('#cancel-create-channel');
@@ -56,24 +78,33 @@ export function render({ navigate }) {
     submitInFlight = !!busy;
     submitEl.disabled = submitInFlight;
     cancelEl.disabled = submitInFlight;
-    inputEl.disabled = submitInFlight;
+    nameEl.disabled = submitInFlight;
+    descriptionEl.disabled = submitInFlight;
     submitEl.textContent = submitInFlight ? 'Создаём...' : 'Создать';
   };
 
   const updateValidation = () => {
-    const check = validateChannelDisplayName(inputEl.value);
-    if (!check.ok) {
-      errorEl.textContent = channelNameErrorText(check.code);
-    } else {
-      errorEl.textContent = '';
-    }
-    submitEl.disabled = submitInFlight || !check.ok;
-    return check;
+    const nameCheck = validateChannelDisplayName(nameEl.value);
+    const descriptionCheck = validateDescription(descriptionEl.value);
+
+    nameErrorEl.textContent = nameCheck.ok ? '' : channelNameErrorText(nameCheck.code);
+    descriptionErrorEl.textContent = descriptionCheck.error;
+
+    const descLength = Number(descriptionCheck.bytes || 0);
+    descriptionCounterEl.textContent = `${descLength} / 200 байт`;
+
+    const ok = nameCheck.ok && descriptionCheck.ok;
+    submitEl.disabled = submitInFlight || !ok;
+
+    return {
+      ok,
+      name: nameCheck.normalized,
+      description: descriptionCheck.normalized,
+    };
   };
 
-  inputEl.addEventListener('input', () => {
-    updateValidation();
-  });
+  nameEl.addEventListener('input', updateValidation);
+  descriptionEl.addEventListener('input', updateValidation);
 
   form.addEventListener('submit', async (event) => {
     event.preventDefault();
@@ -93,31 +124,30 @@ export function render({ navigate }) {
     errorEl.textContent = '';
 
     try {
-      const channelName = normalizeChannelDisplayName(check.normalized);
-      await authService.addBlockCreateChannel({
+      const created = await authService.addBlockCreateChannel({
         login,
         storagePwd,
-        channelName,
+        channelName: normalizeChannelDisplayName(check.name),
+        channelDescription: normalizeChannelDescription(check.description),
       });
 
-      persistCreateSuccessFlash(`Канал "${channelName}" создан.`);
+      const baseMessage = `Канал "${normalizeChannelDisplayName(check.name)}" создан.`;
+      const successMessage = created?.usedLegacyDescriptionFallback
+        ? `${baseMessage} Описание не сохранено: на текущем сервере включен legacy-формат create-channel.`
+        : baseMessage;
+      persistCreateSuccessFlash(successMessage);
       navigate('channels-list');
     } catch (error) {
       errorEl.textContent = toUserMessage(error, 'Не удалось создать канал.');
       setBusy(false);
-      const checkAfterError = validateChannelDisplayName(inputEl.value);
-      submitEl.disabled = submitInFlight || !checkAfterError.ok;
+      updateValidation();
     }
   });
 
-  cancelEl.addEventListener('click', () => {
-    navigate('channels-list');
-  });
+  cancelEl.addEventListener('click', () => navigate('channels-list'));
 
   screen.append(form);
-  if (inputEl) {
-    inputEl.focus();
-    updateValidation();
-  }
+  nameEl.focus();
+  updateValidation();
   return screen;
 }