LibrePortal/containers/libreportal/frontend/components/apps/index.js

// components/apps/index.js — the App Center: the grid (/apps, /apps/<category>)
// AND the per-app detail page (/app/<name>[/<tab>]). One feature owns both route
// sets; mount() dispatches by path. Both render the shared apps-unified-layout
// and drive system-loader singletons — appsManager for the grid, appTabbedManager
// for detail — via .initialize(), never `new`. (app-detail used to be a separate
// sibling component; it's the same feature, so it lives here.)
LP.features.register({
  id: 'apps',
  routes: ['/apps', '/apps*', '/app', '/app*'],

  async mount(ctx) {
    // /apps/overview* -> fleet Overview; /apps* -> grid; everything else
    // (/app*) -> detail. The Overview check must precede the bare '/apps' one
    // (since '/apps/overview'.startsWith('/apps')), and '/apps' before '/app'
    // (since '/apps'.startsWith('/app')). Legacy /overview* is rewritten to
    // /apps/overview* by _legacyRedirect() before this runs.
    if (window.location.pathname.startsWith('/apps/overview')) {
      return this._mountOverview(ctx);
    }
    if (window.location.pathname.startsWith('/apps/marketplace')) {
      return this._mountMarketplace(ctx);
    }
    if (window.location.pathname.startsWith('/apps')) {
      return this._mountGrid(ctx);
    }
    return this._mountDetail(ctx);
  },

  // ---- Marketplace (/apps/marketplace) ----
  async _mountMarketplace(ctx) {
    if (typeof MarketplacePage === 'undefined') {
      await ctx.loadScripts(['/components/apps/marketplace/js/marketplace-page.js']);
    }
    // Reuse the shared apps layout (keeps the sidebar persistent), same as
    // grid/overview. The Marketplace pane + sidebar entry live in the fragment.
    if (!document.querySelector('.apps-layout')) {
      const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
      ctx.setContent(html, 'Marketplace');
    }
    // Render the apps sidebar (search + categories) but show the Marketplace
    // pane and highlight the Marketplace entry instead of any category.
    if (window.appsManager) {
      window.appsManager.currentView = 'marketplace';
      try { window.appsManager.setupSidebar('__marketplace__'); } catch (_) {}
      window.appsManager.showView('marketplace');
    }
    document.querySelectorAll('.apps-layout .category.active').forEach((c) => c.classList.remove('active'));
    const entry = document.getElementById('sidebar-marketplace-entry');
    if (entry) entry.classList.add('active');

    if (typeof MarketplacePage === 'undefined') throw new Error('MarketplacePage failed to load');
    if (!window.marketplacePage) window.marketplacePage = new MarketplacePage(ctx.services);
    await window.marketplacePage.initialize();
  },

  // ---- grid (/apps, /apps/<category>) ----
  async _mountGrid(ctx) {
    const seg = window.location.pathname.replace(/^\/apps\/?/, '').split('/')[0];
    if (seg) {
      window.appsCategory = decodeURIComponent(seg);
    } else {
      const search = window.location.search || '';
      if (search.includes('?=')) {
        window.appsCategory = (window.location.pathname + search).split('?=')[1] || 'all';
      } else {
        window.appsCategory = new URLSearchParams(search).get('apps') || 'all';
      }
    }
    // Load the unified layout only if it isn't already present — preserves grid
    // state when moving between categories / back from detail (legacy behaviour).
    if (!document.querySelector('.apps-layout')) {
      const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
      ctx.setContent(html, 'Applications');
    }
    if (!window.appsManager) throw new Error('AppsManager not initialized by SystemLoader');
    await window.appsManager.initialize();
  },

  // ---- per-app detail (/app/<name>[/<tab>]) ----
  async _mountDetail(ctx) {
    const url = new URL(window.location);
    let appName = url.pathname.replace(/^\/app\/?/, '').split('/')[0];
    appName = appName ? decodeURIComponent(appName) : '';
    if (!appName) appName = url.searchParams.get('app');
    // Old format ?=appname&tab=tabname
    if (!appName && url.search.includes('?=')) {
      const queryPart = url.search.replace('?', '');
      for (const part of queryPart.split('&')) {
        if (part.startsWith('=')) { appName = part.substring(1); break; }
      }
    }
    if (!appName) { return ctx.nav('/apps', false); }

    // Back-compat: rewrite legacy ?tab=/?config= to the canonical path shape
    // before the page reads URL state (replaceState — no extra history entry).
    const legacyTab = url.searchParams.get('tab');
    const legacyConfig = url.searchParams.get('config');
    if (legacyTab || legacyConfig) {
      const tab = legacyTab === 'logs' ? 'tasks' : (legacyTab || 'config');
      const sub = (tab === 'config') ? legacyConfig : null;
      const taskId = url.searchParams.get('task');
      const canonical = ctx.services.router.appPath(appName, tab, sub, taskId);
      if (canonical !== url.pathname + url.search) {
        window.history.replaceState({ route: canonical }, '', canonical);
      }
    }

    const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
    ctx.setContent(html, appName);
    if (!window.appTabbedManager) throw new Error('AppTabbedManager not initialized by SystemLoader');
    await window.appTabbedManager.initialize();
  },

  // ---- fleet Overview (/apps/overview[/<tab>]) ----
  async _mountOverview(ctx) {
    // Lazy-load the fleet controller + its deps. Guard by typeof so re-entry
    // never re-declares the classes (loadScripts dedupes by URL too). The
    // headless UpdaterPage supplies all update/CVE/improvement data + rendering.
    const need = [];
    if (typeof TabController === 'undefined') need.push('/core/ui-state/js/tab-controller.js');
    if (typeof UpdaterPage === 'undefined') need.push('/components/updater/js/updater-page.js');
    if (typeof OverviewManager === 'undefined') need.push('/components/apps/overview/js/overview-manager.js');
    if (need.length) await ctx.loadScripts(need);

    // Reuse the shared apps layout (keeps the sidebar persistent), same as grid.
    if (!document.querySelector('.apps-layout')) {
      const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
      ctx.setContent(html, 'Overview');
    }

    // Render the apps sidebar (search + categories) but show the Overview pane
    // and highlight the Overview entry instead of any category.
    if (window.appsManager) {
      window.appsManager.currentView = 'overview';
      try { window.appsManager.setupSidebar('__overview__'); } catch (_) {}
      window.appsManager.showView('overview');
    }
    document.querySelectorAll('.apps-layout .category.active').forEach((c) => c.classList.remove('active'));
    const entry = document.getElementById('sidebar-overview-entry');
    if (entry) entry.classList.add('active');

    if (typeof OverviewManager === 'undefined') throw new Error('OverviewManager failed to load');
    if (!window.overviewManager) window.overviewManager = new OverviewManager(ctx.services);
    await window.overviewManager.initialize();
  },

  async unmount(ctx) {
    // appsManager / appTabbedManager are shared singletons (never null them), but
    // the detail view's per-mount resources DO need releasing: the reconcile loop,
    // the watchdog window/document listeners, and the active tab's Services
    // intervals + log SSE. dispose() handles all of it (re-armed on next mount).
    // The dirty-config nav guard still fires in navigate() before unmount.
    try { window.appTabbedManager && window.appTabbedManager.dispose && window.appTabbedManager.dispose(); } catch (_) {}
    // Drop the Overview task-refresh registration when leaving the apps feature
    // so a finished update/backup task can't repaint a torn-down pane. The
    // overviewManager singleton + its DOM persist with the layout; its run()
    // self-guards, but unregistering is the clean release.
    try { ctx && ctx.services.tasks.refresh && ctx.services.tasks.refresh.unregister('overview'); } catch (_) {}
    // Same for the Marketplace page's task-refresh registration.
    try { window.marketplacePage && window.marketplacePage.dispose && window.marketplacePage.dispose(); } catch (_) {}
    // Same for the headless updater's auto-refresh timer (re-armed on the next
    // Overview mount).
    try { window.overviewManager && window.overviewManager.updater && window.overviewManager.updater.dispose(); } catch (_) {}
    // The Backups tab embeds a BackupPage; release its document listeners +
    // task-refresh registration on the way out (the "stacks on revisit" bug).
    try { window.overviewBackupPage && window.overviewBackupPage.dispose && window.overviewBackupPage.dispose(); } catch (_) {}
    window.overviewBackupPage = null;
    // Migrate tab sub-controllers (Restore + Peers) — release their listeners.
    try { window.migratePage && window.migratePage.dispose && window.migratePage.dispose(); } catch (_) {}
    window.migratePage = null;
    try { window.peersPage && window.peersPage.dispose && window.peersPage.dispose(); } catch (_) {}
    window.peersPage = null;
  },
});