watchparty/client/js/shell.js

// The persistent app chrome (sidebar with collections + main content area),
// rendered once per login. The router (router.js) only ever swaps what's
// inside #mainContent - see app.js's boot().
import { auth, logout, getLibraries } from './embyApi.js';

const COLLECTION_ICONS = { movies: '🎬', tvshows: '📺', music: '🎵' };

export async function renderShell(appEl) {
  appEl.innerHTML = `
    <div class="appShell">
      <aside class="sidebar">
        <div class="sidebarBrand">Watch Party</div>
        <nav class="sidebarNav" id="sidebarNav">
          <a href="#/home" class="navItem">Accueil</a>
          <div class="navSectionLabel">Bibliothèques</div>
          <p class="hint" id="libStatus">Chargement...</p>
        </nav>
        <button class="linklike sidebarLogout" id="logout">Se déconnecter (${escapeHtml(auth.userName || '')})</button>
      </aside>
      <main id="mainContent" class="mainContent"></main>
    </div>`;

  appEl.querySelector('#logout').addEventListener('click', async () => {
    await logout();
    // Simplest reliable way back to a bare login screen: a real reload,
    // rather than hand-tearing-down every shell/router listener in place.
    location.hash = '';
    location.reload();
  });

  const nav = appEl.querySelector('#sidebarNav');
  const status = appEl.querySelector('#libStatus');
  try {
    const libraries = await getLibraries();
    status.remove();
    libraries.forEach((lib) => {
      const a = document.createElement('a');
      a.href = `#/library/${lib.id}`;
      a.className = 'navItem';
      a.textContent = `${COLLECTION_ICONS[lib.collectionType] || '📁'} ${lib.name}`;
      nav.appendChild(a);
    });
  } catch (err) {
    status.textContent = 'Bibliothèques indisponibles.';
  }

  const highlight = () => {
    nav.querySelectorAll('.navItem').forEach((a) => {
      const isHome = a.getAttribute('href') === '#/home';
      a.classList.toggle('active', a.getAttribute('href') === location.hash || (isHome && !location.hash));
    });
  };
  highlight();
  window.addEventListener('hashchange', highlight);

  return appEl.querySelector('#mainContent');
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}