85 lines
3.5 KiB
JavaScript
85 lines
3.5 KiB
JavaScript
/**
|
|
* Hello Dashboard — sample extension surface.
|
|
*
|
|
* Platform contract:
|
|
* - Mounts into #extension-mount
|
|
* - window.__MANIFEST__ — surface manifest (json, lowercase keys)
|
|
* - window.__USER__ — authenticated user {username, display_name, role}
|
|
* - UI.toast(msg, type) — platform toast (success/error/info/warning)
|
|
* - API._get(path) — authenticated fetch (returns parsed JSON)
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
var mount = document.getElementById('extension-mount');
|
|
if (!mount) return;
|
|
|
|
var manifest = window.__MANIFEST__ || {};
|
|
var user = window.__USER__ || {};
|
|
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
var name = user.display_name || user.username || 'World';
|
|
|
|
mount.innerHTML =
|
|
'<div class="hello-dashboard">' +
|
|
'<div class="hello-header">' +
|
|
'<h1>Hello, ' + esc(name) + '!</h1>' +
|
|
'<p class="hello-subtitle">Extension surface <code>' + esc(manifest.id || 'unknown') + '</code> loaded successfully.</p>' +
|
|
'</div>' +
|
|
'<div class="hello-cards">' +
|
|
card('Platform Access', (typeof UI !== 'undefined' ? '\u2713 Connected' : '\u2717 Unavailable'),
|
|
'API, Theme, UI primitives available', 'var(--accent)') +
|
|
card('Theme', isDark ? '\uD83C\uDF19 Dark' : '\u2600\uFE0F Light',
|
|
'Reads from platform theme system', '') +
|
|
card('Route', '<code>' + esc(manifest.route || '/s/hello-dashboard') + '</code>',
|
|
'Registered via surface manifest', '') +
|
|
'</div>' +
|
|
'<div class="hello-actions">' +
|
|
'<button class="btn-primary" id="helloToast">Show Toast</button>' +
|
|
'<button class="btn-secondary" id="helloApi">Test API</button>' +
|
|
'</div>' +
|
|
'<pre class="hello-manifest">' + esc(JSON.stringify(manifest, null, 2)) + '</pre>' +
|
|
'</div>';
|
|
|
|
// Wire toast button
|
|
document.getElementById('helloToast').addEventListener('click', function() {
|
|
if (typeof UI !== 'undefined' && UI.toast) {
|
|
UI.toast('Extension surface is working!', 'success');
|
|
} else {
|
|
alert('Extension surface is working! (UI.toast not available)');
|
|
}
|
|
});
|
|
|
|
// Wire API test button
|
|
document.getElementById('helloApi').addEventListener('click', function() {
|
|
if (typeof API === 'undefined' || !API._get) {
|
|
toast('API module not available', 'error');
|
|
return;
|
|
}
|
|
API._get('/api/v1/surfaces').then(function(resp) {
|
|
toast('API returned ' + (resp.surfaces || []).length + ' registered surfaces', 'info');
|
|
}).catch(function(e) {
|
|
toast('API error: ' + e.message, 'error');
|
|
});
|
|
});
|
|
|
|
function toast(msg, type) {
|
|
if (typeof UI !== 'undefined' && UI.toast) UI.toast(msg, type);
|
|
else alert(msg);
|
|
}
|
|
|
|
function card(title, value, detail, color) {
|
|
var style = color ? ' style="color:' + color + ';"' : '';
|
|
return '<div class="hello-card">' +
|
|
'<div class="hello-card-title">' + esc(title) + '</div>' +
|
|
'<div class="hello-card-value"' + style + '>' + value + '</div>' +
|
|
'<div class="hello-card-detail">' + esc(detail) + '</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
function esc(s) {
|
|
var el = document.createElement('span');
|
|
el.textContent = s;
|
|
return el.innerHTML;
|
|
}
|
|
})();
|