biibaye/addon/extension.js

export default {
    setupExtension(appInstance, universe) {
        setDocumentTitle();
        injectBrandStyles();
        replaceFavicon();
        overrideAppName(appInstance);

        universe.extensionManager.ensureEngineLoaded('@biibaye/branding');
    },

    onEngineLoaded(engineInstance, universe, appInstance) {
        setDocumentTitle();
        overrideAppName(appInstance);
    },
};

function overrideAppName(appInstance) {
    try {
        const intl = appInstance.lookup('service:intl');
        if (intl && typeof intl.addTranslations === 'function') {
            intl.addTranslations('en-us', { 'app.name': 'Biibaye' });
        }
    } catch (e) {
        // intl service not available yet — will retry in onEngineLoaded
    }
}

function setDocumentTitle() {
    document.title = 'Biibaye - Delivery System';
}

function injectBrandStyles() {
    if (document.getElementById('biibaye-brand-styles')) {
        return;
    }

    const style = document.createElement('style');
    style.id = 'biibaye-brand-styles';
    style.textContent = `
        /* ── Primary color: Biibaye orange (#FF4500) replaces Fleetbase sky (#3485e2) ── */

        /* Tailwind utility classes */
        .bg-sky-500{background-color:#FF4500!important}
        .bg-sky-50,.bg-sky-100,.bg-sky-200,.bg-sky-300,.bg-sky-400{background-color:#FF4500!important}
        .bg-sky-600,.bg-sky-700,.bg-sky-800,.bg-sky-900{background-color:#e03d00!important}
        .text-sky-50,.text-sky-100,.text-sky-200,.text-sky-300,.text-sky-400,.text-sky-500{color:#FF4500!important}
        .text-sky-600,.text-sky-700,.text-sky-800,.text-sky-900{color:#e03d00!important}
        .border-sky-50,.border-sky-100,.border-sky-200,.border-sky-300,.border-sky-400,.border-sky-500{border-color:#FF4500!important}
        .border-sky-600,.border-sky-700,.border-sky-800,.border-sky-900{border-color:#e03d00!important}
        .ring-sky-500{--tw-ring-color:#FF4500!important}
        .accent-sky-500{accent-color:#FF4500!important}
        .caret-sky-500{caret-color:#FF4500!important}

        /* Button component (.btn.btn-primary, .btn-primary-xs, .btn-primary-sm, etc.) */
        .btn.btn-primary,
        .btn-primary-xs,.btn-primary-sm,.btn-primary-md,.btn-primary-lg,.btn-primary-xl,
        button.btn-primary,a.btn-primary{
            background-color:#FF4500!important;
            border-color:#FF4500!important;
            color:#fff!important
        }
        .btn.btn-primary:hover,
        .btn-primary-xs:hover,.btn-primary-sm:hover,.btn-primary-md:hover,.btn-primary-lg:hover,.btn-primary-xl:hover{
            background-color:#e03d00!important;
            border-color:#e03d00!important
        }

        /* Dark theme background */
        body[data-theme="dark"]{background-color:#343538!important}
    `;
    document.head.appendChild(style);
}

function replaceFavicon() {
    removeExistingFavicons();
    addBiibayeFavicon();
    updateMetaTags();
}

function removeExistingFavicons() {
    document.querySelectorAll('link[rel*="icon"], link[rel="apple-touch-icon"], link[rel="mask-icon"]').forEach((el) => el.remove());
    document.querySelectorAll('meta[name="msapplication-TileColor"], meta[name="theme-color"]').forEach((el) => el.remove());
    const manifestLink = document.querySelector('link[rel="manifest"]');
    if (manifestLink) {
        manifestLink.href = '/favicon/site.webmanifest';
    }
}

function addBiibayeFavicon() {
    const faviconPath = '/favicon';
    const links = [
        { rel: 'icon', type: 'image/x-icon', href: `${faviconPath}/favicon.ico` },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: `${faviconPath}/favicon-16x16.png` },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: `${faviconPath}/favicon-32x32.png` },
        { rel: 'icon', type: 'image/png', sizes: '96x96', href: `${faviconPath}/favicon-96x96.png` },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: `${faviconPath}/android-icon-192x192.png` },
        { rel: 'apple-touch-icon', sizes: '57x57', href: `${faviconPath}/apple-icon-57x57.png` },
        { rel: 'apple-touch-icon', sizes: '60x60', href: `${faviconPath}/apple-icon-60x60.png` },
        { rel: 'apple-touch-icon', sizes: '72x72', href: `${faviconPath}/apple-icon-72x72.png` },
        { rel: 'apple-touch-icon', sizes: '76x76', href: `${faviconPath}/apple-icon-76x76.png` },
        { rel: 'apple-touch-icon', sizes: '114x114', href: `${faviconPath}/apple-icon-114x114.png` },
        { rel: 'apple-touch-icon', sizes: '120x120', href: `${faviconPath}/apple-icon-120x120.png` },
        { rel: 'apple-touch-icon', sizes: '144x144', href: `${faviconPath}/apple-icon-144x144.png` },
        { rel: 'apple-touch-icon', sizes: '152x152', href: `${faviconPath}/apple-icon-152x152.png` },
        { rel: 'apple-touch-icon', sizes: '180x180', href: `${faviconPath}/apple-icon-180x180.png` },
    ];

    links.forEach(({ rel, type, sizes, href }) => {
        const link = document.createElement('link');
        link.rel = rel;
        if (type) link.type = type;
        if (sizes) link.sizes = sizes;
        link.href = href;
        document.head.appendChild(link);
    });
}

function updateMetaTags() {
    const metaTags = [
        { name: 'msapplication-TileColor', content: '#FF4500' },
        { name: 'msapplication-TileImage', content: '/favicon/ms-icon-144x144.png' },
        { name: 'theme-color', content: '#FF4500' },
    ];

    metaTags.forEach(({ name, content }) => {
        const meta = document.createElement('meta');
        meta.name = name;
        meta.content = content;
        document.head.appendChild(meta);
    });
}