diff --git a/containers/libreportal/frontend/components/apps/core/css/apps.css b/containers/libreportal/frontend/components/apps/core/css/apps.css index 3bb1600..1b67208 100644 --- a/containers/libreportal/frontend/components/apps/core/css/apps.css +++ b/containers/libreportal/frontend/components/apps/core/css/apps.css @@ -634,9 +634,21 @@ } .lp-instance-head h3 { margin: 0; + /* Takes the slack so the close button stays pinned right once the icon is + added ahead of the title — space-between alone would centre the heading. */ + flex: 1; font-size: 18px; font-weight: 700; } +/* Reuses .app-card-icon (the grid card's holder) for identical framing, scaled + down to sit on a heading line rather than a card. */ +.lp-instance-icon { + width: 44px; + height: 44px; + min-width: 44px; + padding: 8px; + border-radius: 10px; +} .lp-instance-x { background: transparent; border: none; diff --git a/containers/libreportal/frontend/components/apps/core/js/instance-manager.js b/containers/libreportal/frontend/components/apps/core/js/instance-manager.js index e29ba2e..6410cc7 100644 --- a/containers/libreportal/frontend/components/apps/core/js/instance-manager.js +++ b/containers/libreportal/frontend/components/apps/core/js/instance-manager.js @@ -33,12 +33,24 @@ class InstanceManager { } } + // The type's entry in the apps list — source of both the heading and the icon. + _typeApp(typeSlug) { + return (window.apps || []).find(x => (x.command || '').split(' ').pop() === typeSlug); + } + // The type's display title, for the modal heading. _typeTitle(typeSlug) { - const a = (window.apps || []).find(x => (x.command || '').split(' ').pop() === typeSlug); + const a = this._typeApp(typeSlug); return a ? (a.name || typeSlug).split(' - ')[0].trim() : typeSlug; } + // The type's icon. Same source and same default the grid cards use, so the + // modal shows the exact artwork the user just clicked on. + _typeIcon(typeSlug) { + const a = this._typeApp(typeSlug); + return (a && a.icon) || '/core/icons/apps/default.svg'; + } + // user text -> [a-z0-9] id (mirrors the backend's instanceIdPart) _idPart(raw) { return String(raw || '').toLowerCase().replace(/[^a-z0-9]/g, ''); @@ -59,6 +71,7 @@ class InstanceManager { async openCreateModal(typeSlug) { if (document.getElementById('lp-instance-modal')) return; const title = this._typeTitle(typeSlug); + const icon = this._typeIcon(typeSlug); this.domains = await this._loadDomains(); // With no CFG_DOMAIN_n set, a subdomain has nothing to attach to — the backend @@ -76,6 +89,9 @@ class InstanceManager { overlay.innerHTML = `