UI: мультиаккаунты профиля и улучшенный поиск каналов

2026-05-14 16:28:17 +03:00
parent 56a69ab683
commit 94263a46bd
9 changed files with 329 additions and 30 deletions
@@ -0,0 +1,76 @@
+import { renderHeader } from '../components/header.js';
+import { beginAddAccountFlow, state, switchToAccount } from '../state.js';
+import { toUserMessage } from '../services/ui-error-texts.js';
+
+export const pageMeta = { id: 'account-switcher-view', title: 'Сменить профиль' };
+
+export function render({ navigate }) {
+  const screen = document.createElement('section');
+  screen.className = 'stack';
+
+  screen.append(
+    renderHeader({
+      title: 'Сменить профиль',
+      leftAction: { label: '<', onClick: () => navigate('profile-view') },
+    }),
+  );
+
+  const list = document.createElement('div');
+  list.className = 'stack';
+  const status = document.createElement('div');
+  status.className = 'meta-muted';
+
+  const accounts = Array.isArray(state.accounts) ? state.accounts : [];
+  const activeLogin = String(state.session.login || '').trim().toLowerCase();
+
+  if (!accounts.length) {
+    const empty = document.createElement('div');
+    empty.className = 'card meta-muted';
+    empty.textContent = 'Сохранённых аккаунтов пока нет.';
+    list.append(empty);
+  } else {
+    accounts.forEach((account) => {
+      const login = String(account?.login || '').trim();
+      if (!login) return;
+      const card = document.createElement('button');
+      card.type = 'button';
+      card.className = 'card row';
+      card.style.justifyContent = 'space-between';
+      card.style.alignItems = 'center';
+      card.innerHTML = `
+        <strong>${login}</strong>
+        <span class="meta-muted">${login.toLowerCase() === activeLogin ? 'Активный' : 'Переключить'}</span>
+      `;
+      card.addEventListener('click', async () => {
+        if (login.toLowerCase() === activeLogin) return;
+        status.textContent = 'Переключаем аккаунт...';
+        try {
+          await switchToAccount(login);
+          status.textContent = '';
+          navigate('profile-view');
+        } catch (error) {
+          status.textContent = toUserMessage(error, 'Не удалось переключить аккаунт.');
+        }
+      });
+      list.append(card);
+    });
+  }
+
+  const actions = document.createElement('div');
+  actions.className = 'form-actions-grid';
+  actions.innerHTML = `
+    <button class="secondary-btn" id="account-switcher-add-login" type="button">Добавить аккаунт (Войти)</button>
+    <button class="secondary-btn" id="account-switcher-add-register" type="button">Добавить аккаунт (Регистрация)</button>
+  `;
+  actions.querySelector('#account-switcher-add-login')?.addEventListener('click', () => {
+    beginAddAccountFlow();
+    navigate('login-view');
+  });
+  actions.querySelector('#account-switcher-add-register')?.addEventListener('click', () => {
+    beginAddAccountFlow();
+    navigate('register-view');
+  });
+
+  screen.append(list, actions, status);
+  return screen;
+}
@@ -407,12 +407,13 @@ function openChannelFinderModal({ navigate }) {
    <div class="modal" id="channels-find-modal">
      <div class="modal-card stack" style="max-width: min(96vw, 760px); width: min(96vw, 760px);">
        <h3 class="modal-title">Поиск каналов</h3>
-        <p class="meta-muted">Введите логин или формат login/channel</p>
-        <input id="channels-find-input" class="input" placeholder="login/channel" autocomplete="off" />
+        <p class="meta-muted">Введите логин (или начало логина), затем выберите пользователя и канал.</p>
+        <input id="channels-find-input" class="input" placeholder="Например: aid" autocomplete="off" />
        <div id="channels-find-suggest" class="channels-search-suggest" style="display:none"></div>
        <div id="channels-find-list" class="channels-search-suggest" style="display:none"></div>
        <div id="channels-find-error" class="meta-muted inline-error"></div>
        <div class="form-actions-grid">
+          <button class="primary-btn" id="channels-find-run" type="button">Найти</button>
          <button class="secondary-btn" id="channels-find-close" type="button">Закрыть</button>
        </div>
      </div>
@@ -496,9 +497,16 @@ function openChannelFinderModal({ navigate }) {
        channelName: item.channelName,
      }));
    renderChannelRows(channels);
+    if (!channels.length) {
+      errorEl.textContent = filterChannel
+        ? 'Каналы с таким фильтром не найдены.'
+        : `У пользователя "${ownerLogin}" пока нет доступных каналов.`;
+    } else {
+      errorEl.textContent = '';
+    }
  };

-  const refresh = createDebounced(async () => {
+  const runSearch = async () => {
    const raw = String(inputEl?.value || '').trim();
    errorEl.textContent = '';
    if (!raw) {
@@ -506,6 +514,7 @@ function openChannelFinderModal({ navigate }) {
      suggestEl.innerHTML = '';
      channelsEl.style.display = 'none';
      channelsEl.innerHTML = '';
+      errorEl.textContent = 'Введите логин или начало логина.';
      return;
    }

@@ -521,7 +530,7 @@ function openChannelFinderModal({ navigate }) {
        return;
      }

-      if (loginPrefix.length < 2) {
+      if (loginPrefix.length < 1) {
        suggestEl.style.display = 'none';
        suggestEl.innerHTML = '';
        channelsEl.style.display = 'none';
@@ -530,10 +539,20 @@ function openChannelFinderModal({ navigate }) {
      }

      const logins = await authService.searchUsers(loginPrefix);
+      const rows = Array.isArray(logins) ? logins : [];
+      if (!rows.length) {
+        suggestEl.style.display = 'none';
+        suggestEl.innerHTML = '';
+        channelsEl.style.display = 'none';
+        channelsEl.innerHTML = '';
+        errorEl.textContent = `Логины, начинающиеся на "${loginPrefix}", не найдены.`;
+        return;
+      }
      const items = (Array.isArray(logins) ? logins : []).slice(0, 15).map((login) => ({
        label: login,
        login,
      }));
+      errorEl.textContent = '';
      renderButtons(suggestEl, items, async (item) => {
        inputEl.value = `${item.login}/`;
        suggestEl.style.display = 'none';
@@ -543,9 +562,19 @@ function openChannelFinderModal({ navigate }) {
    } catch (error) {
      errorEl.textContent = toUserMessage(error, 'Не удалось выполнить поиск.');
    }
-  }, 220);
+  };
+
+  const refresh = createDebounced(runSearch, 220);

  root.querySelector('#channels-find-close')?.addEventListener('click', close);
+  root.querySelector('#channels-find-run')?.addEventListener('click', () => {
+    void runSearch();
+  });
+  inputEl?.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    void runSearch();
+  });
  inputEl?.addEventListener('input', refresh);
  if (inputEl) inputEl.focus();
 }