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* -> grid; everything else (/app*) -> detail. Check '/apps' FIRST so
    // it wins over '/app' (since '/apps'.startsWith('/app')).
    if (window.location.pathname.startsWith('/apps')) {
      return this._mountGrid(ctx);
    }
    return this._mountDetail(ctx);
  },

  // ---- 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();
  },

  async unmount() {
    // 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 (_) {}
  },
});