[Sure UI] UI enhancer #userscript #violentmonkey #Sure

userscript.js

// ==UserScript==
// @name         Sure tweaks + favorites (stable)
// @version      2.0
// @description  Removes max width + persistent favorite accounts
// @match        https://sure.*/
// @grant        none
// @downloadURL  https://gist.githubusercontent.com/malys/eb9401ca5b00d9d837b70dfd373b84de/raw/userscript.js
// @updateURL    https://gist.githubusercontent.com/malys/eb9401ca5b00d9d837b70dfd373b84de/raw/userscript.js
// ==/UserScript==

(function () {
  'use strict';

  const STORAGE_KEY = 'sure-favorite-accounts';

  function getFavorites() {
    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
  }

  function setFavorites(favs) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(favs));
  }

  function toggleFavorite(id) {
    let favs = getFavorites();
    if (favs.includes(id)) {
      favs = favs.filter(f => f !== id);
    } else {
      favs.push(id);
    }
    setFavorites(favs);
  }

  function removeMaxWidth() {
    document.querySelectorAll('.max-w-4xl, .max-w-5xl').forEach(el => {
      el.classList.remove('max-w-4xl', 'max-w-5xl');
    });
  }

  function enhanceAccounts() {
    const favs = getFavorites();

    document.querySelectorAll('details').forEach(group => {
      const rows = Array.from(
        group.querySelectorAll('div.pl-12.pr-4.py-3')
      );

      if (!rows.length) return;

      rows.forEach(row => {
        const link = row.querySelector('a[href^="/accounts/"]');
        if (!link) return;

        const id = link.getAttribute('href');

        // Add star once
        let star = row.querySelector('.sure-star');
        if (!star) {
          star = document.createElement('span');
          star.textContent = '★';
          star.className = 'sure-star';
          star.style.cursor = 'pointer';
          star.style.marginRight = '6px';
          star.style.opacity = '0.3';

          star.onclick = e => {
            e.preventDefault();
            e.stopPropagation();
            toggleFavorite(id);
            enhanceAccounts();
          };

          link.parentElement.prepend(star);
        }

        // Visual state
        if (favs.includes(id)) {
          row.style.background = 'rgba(255,215,0,0.12)';
          row.style.borderLeft = '4px solid gold';
          star.style.opacity = '1';
        } else {
          row.style.background = '';
          row.style.borderLeft = '';
          star.style.opacity = '0.3';
        }
      });

      // Reorder only once per call
      const sorted = rows.sort((a, b) => {
        const ida = a.querySelector('a')?.getAttribute('href');
        const idb = b.querySelector('a')?.getAttribute('href');
        return (favs.includes(idb) ? 1 : 0) - (favs.includes(ida) ? 1 : 0);
      });

      const parent = rows[0].parentElement;
      sorted.forEach(r => parent.appendChild(r));
    });
  }
    function unfoldAll() {
        document.querySelectorAll('details').forEach(d => {
            d.open = true;
        });
    }

  function runAll() {
    removeMaxWidth();
    unfoldAll();
    enhanceAccounts();
  }

  // Run once after load
  window.addEventListener('load', () => {
    setTimeout(runAll, 500);
  });

  // Re-run on SPA navigation
  const pushState = history.pushState;
  history.pushState = function () {
    pushState.apply(history, arguments);
    setTimeout(runAll, 500);
  };

  window.addEventListener('popstate', () => {
    setTimeout(runAll, 500);
  });
})();