jap_web_ng/src/main.ts

import './style.css';
import { renderHomePage } from './home-page.ts';
import { renderDecksPage } from './decks-page.ts';
import { renderSyncPage } from './sync-page.ts';
import { initWorker } from './sqlite-api.ts';

// Каркас приложения: топ-бар + бургер-меню + страницы (Главная / Колоды / Синхронизация).

type Page = 'home' | 'decks' | 'sync';

const PAGE_TITLES: Record<Page, string> = {
  home: 'Главная',
  decks: 'Колоды',
  sync: 'Синхронизация',
};

function requireEl<T extends HTMLElement>(id: string): T {
  const el = document.getElementById(id);
  if (!el) throw new Error(`[JapLearn] Не найден элемент #${id}`);
  return el as T;
}

const burgerBtn = requireEl<HTMLButtonElement>('burger-btn');
const drawer = requireEl<HTMLElement>('drawer');
const overlay = requireEl<HTMLElement>('drawer-overlay');
const pageTitle = requireEl<HTMLElement>('page-title');
const pageRoot = requireEl<HTMLElement>('page');

let drawerOpen = false;

function setDrawer(open: boolean): void {
  drawerOpen = open;
  drawer.classList.toggle('open', open);
  overlay.hidden = !open;
  burgerBtn.setAttribute('aria-expanded', String(open));
  drawer.setAttribute('aria-hidden', String(!open));
  document.body.classList.toggle('drawer-open', open);
}

function setActiveButton(page: Page): void {
  drawer.querySelectorAll<HTMLButtonElement>('.drawer-btn').forEach((btn) => {
    btn.classList.toggle('active', btn.dataset.page === page);
  });
}

function renderPage(page: Page): void {
  pageTitle.textContent = PAGE_TITLES[page];
  setActiveButton(page);
  if (page === 'home') {
    renderHomePage(pageRoot, {});
  } else if (page === 'decks') {
    renderDecksPage(pageRoot);
  } else {
    renderSyncPage(pageRoot);
  }
}

burgerBtn.addEventListener('click', () => {
  setDrawer(!drawerOpen);
});

overlay.addEventListener('click', () => {
  setDrawer(false);
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && drawerOpen) setDrawer(false);
});

drawer.querySelectorAll<HTMLButtonElement>('.drawer-btn').forEach((btn) => {
  btn.addEventListener('click', () => {
    const page = btn.dataset.page as Page | undefined;
    if (page === 'home' || page === 'decks' || page === 'sync') renderPage(page);
    setDrawer(false);
  });
});



// Старт: главная страница, меню закрыто
await initWorker();
setDrawer(false);
renderPage('home');
console.log('[JapLearn] crossOriginIsolated =', window.crossOriginIsolated);