core/src/js/sw/surfaces/welcome/index.js

/**
 * WelcomeSurface — fallback landing page.
 * Shown when no default surface is configured or no extensions are installed.
 * Checks for available extension surfaces and adjusts messaging.
 */
const { html } = window;
const { useState, useEffect } = hooks;
const { render } = preact;

import { Topbar } from '../../shell/topbar.js';

function WelcomeSurface() {
    const BASE = window.__BASE__ || '';
    const isAdmin = sw.can?.('surface.admin.access');
    const [surfaces, setSurfaces] = useState([]);

    useEffect(() => {
        sw.api.get('/api/v1/surfaces').then(list => {
            setSurfaces((list || []).filter(s => s.route?.startsWith('/s/')));
        }).catch(() => {});
    }, []);

    const hasSurfaces = surfaces.length > 0;

    return html`
        <${Topbar} title="Armature" />
        <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px;">
            <div style="max-width:420px;width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:32px;text-align:center;">
                <div style="font-size:36px;margin-bottom:16px;">${hasSurfaces ? '🏠' : '📦'}</div>
                <h2 style="font-size:20px;font-weight:600;margin:0 0 8px;">Welcome to Armature</h2>
                ${hasSurfaces ? html`
                    <p style="font-size:14px;color:var(--text-2);margin:0 0 24px;line-height:1.5;">
                        No default surface is configured. Choose a surface from
                        the menu, or ${isAdmin ? 'set a default in admin settings.' : 'ask your administrator to set a default.'}
                    </p>
                    ${isAdmin && html`
                        <a href="${BASE}/admin/settings"
                           style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;">
                            Set Default Surface
                        </a>
                    `}
                ` : html`
                    <p style="font-size:14px;color:var(--text-2);margin:0 0 24px;line-height:1.5;">
                        No surfaces are installed yet. Install an extension surface
                        to get started.
                    </p>
                    ${isAdmin && html`
                        <a href="${BASE}/admin/packages"
                           style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;">
                            Go to Packages
                        </a>
                    `}
                    ${!isAdmin && html`
                        <p style="font-size:13px;color:var(--text-3);">
                            Ask your administrator to install a surface package.
                        </p>
                    `}
                `}
            </div>
        </div>
    `;
}

const mount = document.getElementById('welcome-mount');
if (mount) {
    render(html`<${WelcomeSurface} />`, mount);
}