core/src/js/sw/shell/topbar.js

/**
 * Topbar — Standard navigation bar for surfaces
 *
 * Composes NotificationBell + UserMenu into a consistent bar.
 * Surfaces use: <${sw.shell.Topbar} title="My Surface">...slot...<//>
 *
 * Props:
 *   title    — Surface name (falls back to window.__MANIFEST__?.title)
 *   children — Extension slot content (buttons, tabs, pickers)
 */
const { html } = window;

import { NotificationBell } from './notification-bell.js';
import { UserMenu }         from './user-menu.js';

export function Topbar({ title, children }) {
    const displayTitle = title || window.__MANIFEST__?.title || '';

    return html`
        <div class="sw-topbar">
            <span class="sw-topbar__title">${displayTitle}</span>
            <div class="sw-topbar__spacer" />
            ${children && html`<div class="sw-topbar__slot">${children}</div>`}
            <div class="sw-topbar__right">
                <${NotificationBell} />
                <${UserMenu} placement="down-right" />
            </div>
        </div>
    `;
}