SHiNE-server/shine-UI/js/pages/settings-view.js

import { confirmDialog } from '../components/confirm-dialog.js';
import { createTopBar } from '../components/topbar.js';
import { addAppLogEntry, authService, closeSavedProfile, state } from '../state.js';
import { isDeveloperToolsEnabled } from '../services/feature-settings.js';
import { getThemeMode, resolveThemeMode, setThemeMode } from '../services/theme-service.js';
import { openPaletteEditor } from '../components/palette-editor.js';

export const pageMeta = { id: 'settings-view', title: 'Настройки' };

function formatBuildStamp(rawValue) {
  const value = String(rawValue || '').trim();
  if (!/^\d{14}$/.test(value)) return value;
  const yyyy = value.slice(0, 4);
  const mm = value.slice(4, 6);
  const dd = value.slice(6, 8);
  const hh = value.slice(8, 10);
  const min = value.slice(10, 12);
  const ss = value.slice(12, 14);
  return `${yyyy}-${mm}-${dd}/${hh}:${min}__${ss}`;
}

function formatVersionForUi(rawValue) {
  const value = String(rawValue || '').trim();
  if (!value) return 'n/a';
  const formatted = formatBuildStamp(value);
  if (formatted && formatted !== value) {
    return `${formatted} (${value})`;
  }
  return value;
}

export function render({navigate, chrome}) {
  const screen = document.createElement('section');
  screen.className = 'stack';
  let isDisposed = false;

  const topbar = createTopBar({
    title: 'Настройки',
    back: { label: '←', onClick: () => navigate('profile-view') },
  });
  chrome?.setTopbar(topbar);

  // Скрытый вход в «Дополнительные настройки»: пять быстрых нажатий на заголовок.
  let titleTapCount = 0;
  let lastTitleTapAt = 0;
  topbar.querySelector('.topbar__title')?.addEventListener('click', () => {
    const now = Date.now();
    titleTapCount = now - lastTitleTapAt <= 900 ? titleTapCount + 1 : 1;
    lastTitleTapAt = now;
    if (titleTapCount < 5) return;
    titleTapCount = 0;
    navigate('advanced-settings-view');
  });

  const card = document.createElement('div');
  card.className = 'stack settings-sections';
  const row = (id, label, hint) => `<button class="nav-row" type="button" id="${id}"><span class="nav-row__label">${label}</span>${hint ? `<span class="nav-row__hint">${hint}</span>` : ''}</button>`;
  card.innerHTML = `
    <div class="card stack settings-theme-card">
      <strong id="settings-theme-label">Оформление</strong>
      <div class="tabs tabs--auto" id="settings-theme" role="radiogroup" aria-labelledby="settings-theme-label">
        <button type="button" class="tab-btn" role="radio" data-mode="system">Авто</button>
        <button type="button" class="tab-btn" role="radio" data-mode="light">День</button>
        <button type="button" class="tab-btn" role="radio" data-mode="dark">Ночь</button>
      </div>
      <span class="meta-muted">«Авто» – как на устройстве.</span>
      <button type="button" class="secondary-btn settings-theme-editor" id="settings-theme-editor">Настроить цвета</button>
    </div>
    <div class="nav-list">
      ${row('settings-device', 'Устройства', 'Сеансы, подключение устройств, ключи')}
      ${row('settings-access-servers', 'Сервер доступа', 'Личная переписка, звонки и зашифрованные данные')}
      ${row('settings-blockchain-servers', 'Серверы блокчейнов', 'Solana, Сияние и Arweave для публичных данных')}
      ${row('settings-arweave-uploads', 'Файлы в блокчейне', 'Заранее загрузить файл и выбрать его потом')}
      ${row('settings-remote-addblock', 'Публикация через домашний сервер', 'Когда ключа публикаций нет на этом устройстве')}
      ${row('settings-language', 'Язык / Language', 'Русский')}
    </div>
    <div class="nav-list">
      <button class="nav-row nav-row--danger" type="button" id="settings-signout"><span class="nav-row__label">Выйти из аккаунта на этом устройстве</span></button>
    </div>
  `;

  const themeSwitch = card.querySelector('#settings-theme');
  const syncThemeSwitch = () => {
    const mode = getThemeMode();
    themeSwitch.querySelectorAll('[data-mode]').forEach((btn) => {
      btn.setAttribute('aria-checked', String(btn.dataset.mode === mode));
    });
  };
  syncThemeSwitch();

  themeSwitch.addEventListener('click', (event) => {
    const mode = event.target.closest('[data-mode]')?.dataset.mode;
    if (!mode) return;
    setThemeMode(mode);
    syncThemeSwitch();
  });
  card.querySelector('#settings-theme-editor').addEventListener('click', () => {
    openPaletteEditor({ theme: resolveThemeMode() });
  });

  card.querySelector('#settings-device').addEventListener('click', () => navigate('device-view'));
  card.querySelector('#settings-remote-addblock').addEventListener('click', () => navigate('remote-addblock-session-view'));
  card.querySelector('#settings-access-servers').addEventListener('click', () => navigate('access-servers-view'));
  card.querySelector('#settings-blockchain-servers').addEventListener('click', () => navigate('server-settings-view'));
  card.querySelector('#settings-arweave-uploads').addEventListener('click', () => navigate('arweave-uploads-view'));
  card.querySelector('#settings-language').addEventListener('click', () => {
    sessionStorage.setItem('shine-language-return-page', 'settings-view');
    navigate('language-view');
  });

  const signOutBtn = card.querySelector('#settings-signout');
  signOutBtn.addEventListener('click', async () => {
    const confirmed = await confirmDialog({
      title: 'Выйти из аккаунта?',
      text: 'Вы выйдете на этом устройстве. Если сохранены другие профили, приложение переключится на следующий.',
      confirmLabel: 'Выйти',
      danger: true,
    });
    if (!confirmed) return;

    signOutBtn.disabled = true;
    try {
      addAppLogEntry({
        level: 'info',
        source: 'session',
        message: 'Запрошено завершение текущей сессии',
      });
      const result = await closeSavedProfile(state.session.login);
      window.location.assign(result?.nextProfile ? '/profile' : '/start');
    } finally {
      signOutBtn.disabled = false;
    }
  });

  screen.append(card);

  if (isDeveloperToolsEnabled()) {
    const versionCard = document.createElement('div');
    versionCard.className = 'card stack';

    const title = document.createElement('p');
    title.className = 'field-label';
    title.textContent = 'Версии';

    const clientVersion = document.createElement('p');
    clientVersion.className = 'meta-muted';
    clientVersion.textContent = `Клиент: ${formatVersionForUi(window.__SHINE_CLIENT_VERSION__)}`;

    const uiBuild = document.createElement('p');
    uiBuild.className = 'meta-muted';
    uiBuild.textContent = `Сборка UI: ${formatVersionForUi(window.__SHINE_BUILD_HASH__)}`;

    const serverVersion = document.createElement('p');
    serverVersion.className = 'meta-muted';
    serverVersion.textContent = 'Сервер: загружается...';

    versionCard.append(title, clientVersion, uiBuild, serverVersion);

    const developerCard = document.createElement('div');
    developerCard.className = 'card stack';
    developerCard.innerHTML = `
      <button class="shine-btn shine-btn--settings" type="button" id="settings-developer">Настройки разработчика</button>
    `;
    developerCard.querySelector('#settings-developer').addEventListener('click', () => navigate('developer-settings-view'));

    void (async () => {
      try {
        let value = '';
        try {
          const pingResp = await authService.ws.request('Ping', { ts: Date.now() }, 7000);
          value = String(pingResp?.payload?.serverVersion || pingResp?.serverVersion || '').trim();
        } catch {
          // fallback below
        }

        if (!value) {
          const infoResp = await authService.ws.request('GetServerInfo', {});
          value = String(infoResp?.payload?.version || '').trim();
        }
        if (!isDisposed) serverVersion.textContent = `Сервер: ${formatVersionForUi(value)}`;
      } catch {
        if (!isDisposed) {
          serverVersion.textContent = 'Сервер: недоступно';
        }
      }
    })();

    screen.append(versionCard, developerCard);
  }

  screen.cleanup = () => {
    isDisposed = true;
  };
  return screen;
}