Tampermonkey to replace Gmail Tabs

gmail-tabs.js

// ==UserScript==
// @name         Gmail Quick Label Tabs (colored, no quotes)
// @namespace    https://example.soma
// @version      1.3.0
// @description  Extra bar under Gmail toolbar with colored label buttons (no quotes).
// @match        https://mail.google.com/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  // ---------------------- CONFIG ----------------------
  const TABS = [
    { title: "Mind",          type: "in",    value: "inbox",             color: "#1976d2" },
    { title: "Job alerts",    type: "label", value: "munkahely-job-alert", color: "#2e7d32" },
    { title: "Don't forget!", type: "label", value: "don't-forget!",     color: "#d32f2f" },
    { title: "News",          type: "label", value: "news",              color: "#f57c00" },
  ];
  // ----------------------------------------------------

  const STYLE_ID = "gqlt-style";
  const BAR_ID = "gqlt-bar";

  function ensureStyles() {
    if (document.getElementById(STYLE_ID)) return;
    const css = `
      #${BAR_ID} {
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.06);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding: 8px 10px;
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      }
      #${BAR_ID}::-webkit-scrollbar { height: 8px; }
      .gqlt-btn {
        padding: 8px 14px;
        border-radius: 6px; /* szögletes, enyhén lekerekített */
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        color: #fff;
        border: none;
        user-select: none;
        white-space: nowrap;
        transition: filter 0.2s;
      }
      .gqlt-btn:hover {
        filter: brightness(1.1);
      }
      .gqlt-btn.active {
        outline: 2px solid black;
      }
    `;
    const style = document.createElement("style");
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  function buildQuery(tab) {
    if (tab.type === "in") return "in:" + tab.value;
    // fontos: nincs idézőjel
    return `label:${tab.value}`;
  }

  function goToSearch(query) {
    const encoded = encodeURIComponent(query);
    if (!location.hash.startsWith("#search/") ||
        !decodeURIComponent(location.hash.slice(8)).startsWith(query)) {
      location.hash = "#search/" + encoded;
    } else {
      location.hash = "#inbox";
      setTimeout(() => (location.hash = "#search/" + encoded), 10);
    }
  }
  function goToInbox() { location.hash = "#inbox"; }

  function currentQuery() {
    if (!location.hash.startsWith("#search/")) return null;
    try { return decodeURIComponent(location.hash.slice(8)); } catch { return null; }
  }
  function isActive(tab) {
    const cq = currentQuery();
    if (!cq && tab.type === "in" && tab.value === "inbox" && location.hash.startsWith("#inbox")) return true;
    if (!cq) return false;
    return cq.toLowerCase().startsWith(buildQuery(tab).toLowerCase());
  }

  function createBar() {
    let bar = document.getElementById(BAR_ID);
    if (bar) return bar;
    bar = document.createElement("div");
    bar.id = BAR_ID;

    TABS.forEach((tab) => {
      const btn = document.createElement("button");
      btn.className = "gqlt-btn";
      btn.textContent = tab.title;
      btn.style.backgroundColor = tab.color; // saját szín
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        if (tab.type === "in" && tab.value === "inbox") goToInbox();
        else goToSearch(buildQuery(tab));
        refreshActiveStates();
      });
      bar.appendChild(btn);
    });
    return bar;
  }

  function refreshActiveStates() {
    const buttons = document.querySelectorAll(`#${BAR_ID} .gqlt-btn`);
    buttons.forEach((btn, idx) => {
      const tab = TABS[idx];
      btn.classList.toggle("active", isActive(tab));
    });
  }

  function findAtbContainer() {
    let el = document.querySelector('div.D.E.G-atb[gh="tm"]');
    if (el) return el;
    const mtb = document.querySelector('div[gh="mtb"]');
    if (mtb) {
      let p = mtb.parentElement;
      while (p && p !== document.body) {
        if (p.matches && p.matches('div.D.E.G-atb,[gh="tm"]')) return p;
        p = p.parentElement;
      }
    }
    return document.querySelector('div[role="main"]');
  }

  function mountBar() {
    ensureStyles();
    const bar = createBar();
    const atb = findAtbContainer();
    if (!atb) return;
    if (!document.getElementById(BAR_ID)) {
      atb.insertAdjacentElement("afterend", bar);
    }
    refreshActiveStates();
  }

  const observer = new MutationObserver(() => mountBar());
  observer.observe(document.documentElement, { childList: true, subtree: true });

  window.addEventListener("hashchange", refreshActiveStates);
  window.addEventListener("load", () => {
    mountBar();
    setTimeout(mountBar, 800);
  });
  setInterval(mountBar, 3500);
})();