Let moderators track their own activity

[qubodup]

Sometimes moderators make mistakes, for example approving something they didn't mean to approve. It can be an effort to find the accidentally approved sound after the fact.

To help moderators take care of their own small mistakes, please track their latest 1000 actions in https://freesound.org/tickets/moderation/

Actions mean changing a sound status (approve, defer, return, delete)

This could be lead to https://freesound.org/tickets/moderation/activity

Mockup content:

Sorted reverse by time.

Other actions to track ideally: whitelisting users, approving/deleting forum posts, deleting users

[qubodup]

Mockup userscript (tampermonkey etc) that only tracks when sounds were last loaded inside of https://freesound.org/tickets/moderation/assigned/[id]/ :

// ==UserScript==
// @name         Freesound Mod Activity Tracker
// @namespace    freesound-mod-activity
// @version      1.2
// @description  Track moderation activity on Freesound
// @match        https://freesound.org/tickets/moderation*
// @grant        none
// ==/UserScript==

(function () {
"use strict";

/* ---------------- SETTINGS ---------------- */

const STORAGE_KEY = "fs_mod_activity_v1";

/* ---------------- STORAGE ---------------- */

// Load activity data from localStorage
function loadData() {
    try {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
    } catch {
        return {};
    }
}

// Merge new entries with existing ones (multi-tab safe)
function saveData(newEntries) {

    const current = loadData();

    for (const [id, entry] of Object.entries(newEntries)) {

        if (!current[id]) {
            current[id] = entry; // new sound
        } else {
            current[id].lastSeen = entry.lastSeen; // update timestamp
        }
    }

    localStorage.setItem(STORAGE_KEY, JSON.stringify(current));
}

/* ---------------- SOUND PARSING ---------------- */

// Extract sound information from DOM element
function parseSound(el) {

    const id = el.dataset.soundId;
    if (!id) return null;

    const titleLink = el.querySelector("h5 a");

    // specifically target the user profile link
    const userLink = [...el.querySelectorAll('a[href^="/people/"]')]
    .find(a => /^\/people\/[^\/]+\/?$/.test(a.getAttribute("href")));

    if (!titleLink || !userLink) return null;

    return {
        id,
        title: titleLink.textContent.trim(),
        soundUrl: new URL(titleLink.getAttribute("href"), location.origin).href,
        username: userLink.textContent.trim(),
        userUrl: new URL(userLink.getAttribute("href"), location.origin).href,
        lastSeen: Date.now()
    };
}

/* ---------------- OBSERVER ---------------- */

// Process one sound element
function handleNode(node) {

    if (!node.matches?.(".sound-info-element")) return;

    const sound = parseSound(node);
    if (!sound) return;

    const entry = {};
    entry[sound.id] = sound;

    saveData(entry);
}

// Watch for dynamically inserted sounds
function observeSounds() {

    const container = document.querySelector("#selected-sounds-info");
    if (!container) return;

    // process existing elements
    container.querySelectorAll(".sound-info-element").forEach(handleNode);

    const observer = new MutationObserver(mutations => {

        for (const m of mutations) {
            m.addedNodes.forEach(handleNode);
        }

    });

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

/* ---------------- NAVBAR LINK ---------------- */

// Add "Activity" tab in moderation navbar
function addActivityLink() {

    const ul = document.querySelector("ul.navbar-messages.center");
    if (!ul) return;

    if (ul.querySelector(".tm-activity-link")) return;

    const li = document.createElement("li");
    li.className = "nav-item tm-activity-link";

    const a = document.createElement("a");
    a.className = "nav-link";
    a.textContent = "Activity";
    a.href = "/tickets/moderation/activity";

    li.appendChild(a);
    ul.appendChild(li);
}

// format timestamp as YYYY-MM-DD HH:MM:SS (24h)
function formatDate(ts) {

    const d = new Date(ts);

    const pad = n => String(n).padStart(2, "0");

    return (
        d.getFullYear() + "-" +
        pad(d.getMonth() + 1) + "-" +
        pad(d.getDate()) + " " +
        pad(d.getHours()) + ":" +
        pad(d.getMinutes()) + ":" +
        pad(d.getSeconds())
    );
}

/* ---------------- ACTIVITY PAGE ---------------- */

function renderActivityPage() {

    const container = document.querySelector(".navbar-space-filler");
    if (!container) return;

    const data = loadData();
    const entries = Object.values(data);

    /* ----- sorting state ----- */

    let sortKey = "lastSeen";
    let sortDir = "desc";

    /* ----- styling ----- */

    const style = document.createElement("style");
    style.textContent = `
    #tm-table { border-collapse:collapse; width:100%; }
    #tm-table th, #tm-table td { padding:6px 10px; }

    #tm-table th {
        cursor:pointer;
        user-select:none;
        position:relative;
        padding-right:20px;
    }

    #tm-table th:hover {
        background:#f0f0f0;
    }

    .tm-sort-active {
        background:#e8eefc;
    }

    .tm-sort-indicator {
        position:absolute;
        right:6px;
        opacity:0.7;
    }

    #tm-table tbody tr:nth-child(even){
        background:#fafafa;
    }
    `;
    document.head.appendChild(style);

    /* ----- layout ----- */

    const wrapper = document.createElement("div");

    wrapper.innerHTML = `
        <div style="margin-bottom:20px">
            <h1>Moderation Activity</h1>
            <div><b>${entries.length}</b> entries</div>
            <button id="tm-delete-all">Delete all</button>
            <button id="tm-keep-1000">Keep newest 1000</button>
            <button id="tm-keep-100">Keep newest 100</button>
        </div>

        <table id="tm-table" border="1">
            <thead>
                <tr>
                    <th data-sort="title">Sound</th>
                    <th data-sort="username">User</th>
                    <th data-sort="lastSeen">Date</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    `;

    container.innerHTML = "";
    container.appendChild(wrapper);

    const tbody = wrapper.querySelector("tbody");

    /* ----- sorting ----- */

    function sortEntries() {

        entries.sort((a,b)=>{

            let result;

            if (sortKey === "lastSeen") {
                result = a.lastSeen - b.lastSeen;
            } else {
                result = String(a[sortKey]).localeCompare(String(b[sortKey]));
            }

            return sortDir === "asc" ? result : -result;
        });
    }

    /* ----- update arrow indicators ----- */

    function updateIndicators() {

        wrapper.querySelectorAll("th").forEach(th=>{

            th.classList.remove("tm-sort-active");

            let indicator = th.querySelector(".tm-sort-indicator");

            if (!indicator) {
                indicator = document.createElement("span");
                indicator.className = "tm-sort-indicator";
                th.appendChild(indicator);
            }

            const key = th.dataset.sort;

            if (key === sortKey) {

                th.classList.add("tm-sort-active");
                indicator.textContent = sortDir === "asc" ? "▲" : "▼";

            } else {

                indicator.textContent = "↕";
            }
        });
    }

    /* ----- table rendering ----- */

    function renderRows(list) {

        tbody.innerHTML = "";

        for (const e of list) {

            const tr = document.createElement("tr");

            tr.innerHTML = `
                <td><a href="${e.soundUrl}" target="_blank">${e.title}</a></td>
                <td><a href="${e.userUrl}" target="_blank">${e.username}</a></td>
                <td>${formatDate(e.lastSeen)}</td>
            `;

            tbody.appendChild(tr);
        }
    }

    /* ----- header click sorting ----- */

    wrapper.querySelectorAll("th").forEach(th=>{

        th.addEventListener("click",()=>{

            const key = th.dataset.sort;

            if (key === sortKey) {
                sortDir = sortDir === "asc" ? "desc" : "asc";
            } else {
                sortKey = key;
                sortDir = "asc";
            }

            sortEntries();
            renderRows(entries);
            updateIndicators();
        });

    });

    /* ----- cleanup buttons ----- */

    wrapper.querySelector("#tm-delete-all").onclick = ()=>{
        localStorage.removeItem(STORAGE_KEY);
        location.reload();
    };

    wrapper.querySelector("#tm-keep-1000").onclick = ()=>{
        trimEntries(1000);
    };

    wrapper.querySelector("#tm-keep-100").onclick = ()=>{
        trimEntries(100);
    };

    function trimEntries(n) {

        const data = loadData();

        const list = Object.values(data)
            .sort((a,b)=>b.lastSeen-a.lastSeen)
            .slice(0,n);

        const newData = {};
        list.forEach(e=>newData[e.id]=e);

        localStorage.setItem(STORAGE_KEY, JSON.stringify(newData));

        location.reload();
    }

    /* initial render */

    sortEntries();
    updateIndicators();
    renderRows(entries);
}

/* ---------------- ROUTER ---------------- */

function init() {

    addActivityLink();

    if (location.pathname.startsWith("/tickets/moderation/assigned")) {
        observeSounds();
    }

    if (location.pathname === "/tickets/moderation/activity") {
        renderActivityPage();
    }
}

init();

})();

At https://freesound.org/tickets/moderation/ it adds a link to https://freesound.org/tickets/moderation/activity which it populates with stuff like: