FluentSupportProductTitle.js

// ==UserScript==
// @name         Fluent Support - Product Badge
// @namespace    http://tampermonkey.net/
// @version      4.0
// @description  Show product as native badge
// @match        https://support.wpmanageninja.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';


    function injectCSS() {
        const style = document.createElement('style');
        style.innerHTML = `
            .fs-product-inline {
                background-color: rgb(163, 178, 189);
                border-radius: 3px;
                color: #fff;
                display: inline-flex;
                align-items: center;
                justify-content: space-evenly;
                height: 19px;
                padding: 6px 12px;
                margin-right: 6px;
                min-width: 45px;
                opacity: 0.8;
                font-size: 11px;
                box-sizing: border-box;
            }
        `;
        document.head.appendChild(style);
    }

    function getTickets() {
        return window.fsCurrentFilteredTickets || [];
    }

    function extractTicketId(row) {
        const link = row.querySelector('.fs_ticket_title');
        return link?.href?.match(/tickets\/(\d+)/)?.[1];
    }

    function injectProductBadge() {
        const tickets = getTickets();
        if (!tickets.length) return;

        document.querySelectorAll('.el-table__row').forEach(row => {
            const ticketId = extractTicketId(row);
            if (!ticketId) return;

            const ticket = tickets.find(t => t.id == ticketId);
            if (!ticket || !ticket.product) return;

            const preview = row.querySelector('.fs_tk_preview');
            if (!preview) return;

            // prevent duplicate
            if (preview.querySelector('.fs-product-inline')) return;

            const inboxBadge = preview.querySelector('.fs_inbox_identifier');

            const badge = document.createElement('span');
            badge.className = 'fs-product-inline';
            badge.innerText = ticket.product.title;

            if (inboxBadge) {
                inboxBadge.parentNode.insertBefore(badge, inboxBadge);
            } else {
                preview.appendChild(badge);
            }
        });
    }

    function init() {
        injectCSS();
        injectProductBadge();

        const observer = new MutationObserver(() => {
            injectProductBadge();
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });


    }

    const wait = setInterval(() => {
        if (window.fsCurrentFilteredTickets) {
            clearInterval(wait);
            init();
        }
    }, 500);

})();