settings.js

document.addEventListener("DOMContentLoaded", () => {

    chrome.storage.local.get(["soundEnabled", "desktopEnabled"], (data) => {
        document.getElementById("sound-toggle").checked = data.soundEnabled ?? true;
        document.getElementById("desktop-toggle").checked = data.desktopEnabled ?? true;
    })

    document.getElementById("save-btn").addEventListener("click", () => {
        const soundEnabled = document.getElementById("sound-toggle").checked;
        const desktopEnabled = document.getElementById("desktop-toggle").checked;

        chrome.storage.local.set({soundEnabled, desktopEnabled}, () => {
            indicateSettingsUpdate();
        })
    })
})

function indicateSettingsUpdate() {
    const saveSection = document.getElementById("save-section");

    const existingPopup = document.getElementById("popup");
    if (existingPopup) existingPopup.remove();

    const popup = document.createElement("div");
    popup.id = "popup";

    const popupText = document.createElement("p");
    popupText.textContent = "Settings Updated!";

    popup.appendChild(popupText);
    saveSection.appendChild(popup);
    //not fading correctly (not a big deal but a QoL thing)
    requestAnimationFrame(() => {
        popup.classList.add("show");
    });

    setTimeout(() => {
        popup.classList.remove("show");
    }, 2000);

    setTimeout(() => {
        popup.remove();
    }, 2500);
}