popup.js

document.addEventListener('DOMContentLoaded', function() {
    const toggleExtension = document.getElementById('toggleExtension');
    const customCss = document.getElementById('customCss');
    const applyBtn = document.getElementById('applyBtn');
    const optionsDiv = document.querySelector('.options');
    const defaultCustomCss = `/* Change color of draft PR titles to gray */
div:has(> span[aria-label="Draft Pull Request"]) + div .markdown-title {
  color: gray!important;
}

/* Change primary button color to white */
.Button--primary {
  background-color: white;
  color: black;
}`;

    // Load saved settings
    chrome.storage.sync.get(['extensionEnabled', 'selectedTheme', 'customCssValue'], function(data) {
        toggleExtension.checked = data.extensionEnabled !== false;
        customCss.value = data.customCssValue || defaultCustomCss;
        optionsDiv.style.opacity = toggleExtension.checked ? 1 : 0.6;
    });

    // Toggle extension state
    toggleExtension.addEventListener('change', function() {
        const isEnabled = toggleExtension.checked;
        chrome.storage.sync.set({extensionEnabled: isEnabled});
        optionsDiv.style.opacity = isEnabled ? 1 : 0.6;

        // Send message to content script
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                action: "toggleExtension",
                value: isEnabled
            });
        });
    });

    // Apply styles
    applyBtn.addEventListener('click', function() {
        const cssValue = customCss.value;
        const theme = 'custom';

        // Save settings
        chrome.storage.sync.set({
            customCssValue: cssValue
        });

        // Send message to content script
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                action: "applyStyle",
                theme: theme,
                customCss: cssValue
            });
        });

        // Show confirmation
        applyBtn.textContent = 'Styles Applied!';
        setTimeout(() => {
            applyBtn.textContent = 'Apply Styles to GitHub';
        }, 1500);
    });

    // Update theme previews
    function updateThemePreviews(selectedTheme) {
        themePreviews.forEach(preview => {
            preview.classList.remove('active');
            if (preview.getAttribute('data-theme') === selectedTheme) {
                preview.classList.add('active');
            }
        });
    }
});