feat: finalize channels fixes and runtime stability

2026-04-13 23:00:36 +03:00
parent 0c7d8fac02
commit a9c69e5947
46 changed files with 4654 additions and 356 deletions
@@ -1,38 +1,123 @@
 import { renderHeader } from '../components/header.js';
+import { authService, state } from '../state.js';
+import { toUserMessage } from '../services/ui-error-texts.js';
+import {
+  channelNameErrorText,
+  normalizeChannelDisplayName,
+  validateChannelDisplayName,
+} from '../services/channel-name-rules.js';

-export const pageMeta = { id: 'add-channel-view', title: 'Добавить канал' };
+export const pageMeta = { id: 'add-channel-view', title: 'Создать канал' };
+
+const CREATE_CHANNEL_FLASH_KEY = 'shine-channels-create-success';
+
+function persistCreateSuccessFlash(message) {
+  try {
+    sessionStorage.setItem(CREATE_CHANNEL_FLASH_KEY, String(message || '').trim());
+  } catch {
+    // ignore storage errors
+  }
+}

 export function render({ navigate }) {
  const screen = document.createElement('section');
-  screen.className = 'stack';
+  screen.className = 'stack channels-screen channels-screen--add';

  screen.append(
    renderHeader({
-      title: 'Добавить канал',
-      leftAction: { label: '←', onClick: () => navigate('channels-list') },
+      title: 'Создать канал',
+      leftAction: { label: '<', onClick: () => navigate('channels-list') },
    })
  );

  const form = document.createElement('form');
  form.className = 'card stack';
  form.innerHTML = `
-    <label for="channel-name">Имя канала</label>
-    <input id="channel-name" class="input" maxlength="64" placeholder="Например: Новости команды" required />
-    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
+    <strong class="channel-head-title">Создание канала</strong>
+    <p class="channel-head-meta">Можно использовать кириллицу, латиницу, цифры, пробел, _ и -.</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-create-error" class="meta-muted inline-error"></div>
+    <div class="form-actions-grid">
      <button type="button" class="secondary-btn" id="cancel-create-channel">Отмена</button>
-      <button type="submit" class="primary-btn">Создать</button>
+      <button type="submit" class="primary-btn" id="submit-create-channel">Создать</button>
    </div>
  `;

-  form.addEventListener('submit', (event) => {
-    event.preventDefault();
-    navigate('channels-list');
+  const inputEl = form.querySelector('#channel-name');
+  const errorEl = form.querySelector('#channel-create-error');
+  const submitEl = form.querySelector('#submit-create-channel');
+  const cancelEl = form.querySelector('#cancel-create-channel');
+
+  let submitInFlight = false;
+
+  const setBusy = (busy) => {
+    submitInFlight = !!busy;
+    submitEl.disabled = submitInFlight;
+    cancelEl.disabled = submitInFlight;
+    inputEl.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;
+  };
+
+  inputEl.addEventListener('input', () => {
+    updateValidation();
  });

-  form.querySelector('#cancel-create-channel').addEventListener('click', () => {
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    if (submitInFlight) return;
+
+    const login = state.session.login;
+    const storagePwd = state.session.storagePwdInMemory;
+    if (!login || !storagePwd) {
+      errorEl.textContent = 'Сессия недействительна. Выполните вход заново.';
+      return;
+    }
+
+    const check = updateValidation();
+    if (!check.ok) return;
+
+    setBusy(true);
+    errorEl.textContent = '';
+
+    try {
+      const channelName = normalizeChannelDisplayName(check.normalized);
+      await authService.addBlockCreateChannel({
+        login,
+        storagePwd,
+        channelName,
+      });
+
+      persistCreateSuccessFlash(`Канал "${channelName}" создан.`);
+      navigate('channels-list');
+    } catch (error) {
+      errorEl.textContent = toUserMessage(error, 'Не удалось создать канал.');
+      setBusy(false);
+      const checkAfterError = validateChannelDisplayName(inputEl.value);
+      submitEl.disabled = submitInFlight || !checkAfterError.ok;
+    }
+  });
+
+  cancelEl.addEventListener('click', () => {
    navigate('channels-list');
  });

  screen.append(form);
+  if (inputEl) {
+    inputEl.focus();
+    updateValidation();
+  }
  return screen;
 }