☰

GitLab Review Tags

Insert predefined review tags with emoji and tooltips (shown below) in GitLab MRs

// ==UserScript==
// @name         GitLab Review Tags
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Insert predefined review tags with emoji and tooltips (shown below) in GitLab MRs
// @exclude      https://gitlab.com/*/merge_requests/new*
// @match        https://gitlab.com/*/merge_requests/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gitlab.com
// @grant        none
// @license      MIT
// ==/UserScript==


(function () {
  'use strict';

  const TAGS = [
    { label: '[question]', emoji: '❓', emojiCode: ':question:', title: 'I’m asking for clarification, not blocking approval.' },
    { label: '[nitpick]', emoji: '🔍', emojiCode: ':mag:', title: 'Very minor; doesn’t block, can fix later or skip.' },
    { label: '[info]', emoji: 'ℹ️', emojiCode: ':information_source:', title: 'Providing context or background, no action needed.' },
    { label: '[suggestion]', emoji: '💡', emojiCode: ':bulb:', title: 'Optional improvement idea, not a requirement.' },
    { label: '[blocking]', emoji: '⛔', emojiCode: ':no_entry:', title: 'This must be addressed before approval.' },
    { label: '[trust]', emoji: '🤝', emojiCode: ':handshake:', title: 'I didn’t check this part deeply but I trust your expertise.' },
    { label: '[follow-up]', emoji: '📌', emojiCode: ':pushpin:', title: 'Let’s merge, but create a ticket to improve or clean up later.' },
    { label: '[praise]', emoji: '🙌', emojiCode: ':raised_hands:', title: 'Explicitly calling out something well done or elegant.' },
    { label: '[discussion]', emoji: '🗣️', emojiCode: ':speaking_head:', title: 'Not blocking, but we should talk as a team about this approach or pattern.' }
  ];

  const STYLE = `
    :root {
      --tooltip-bg: #fafafa;
      --tooltip-color: #303030;
      --tag-bg: #fafafa;
      --tag-border: #bfbfbf;
      --button-border: #bfbfbf;
      --button-bg: #fafafa;
      --button-hover-bg: #dbdbdb;
      --button-hover-border: #428fdc;
    }

    body.gl-dark {
      --tooltip-bg: var(--gray-10);
      --tooltip-color: var(--gray-950);
      --tag-bg: var(--gray-10);
      --tag-border: var(--gray-100);
      --button-border: var(--gray-100);
      --button-bg: #1f1f1f;
      --button-hover-bg: #303030;
      --button-hover-border: #428fdc;
    }

    .gl-tag-inserter {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 6px;
      margin: 6px 0;
      padding: 6px;
      background-color: var(--tag-bg);
      border: 1px solid var(--tag-border);
      border-radius: 8px;
      font-family: system-ui, sans-serif;
      animation: fadeIn 0.3s ease-out;
    }

    .gl-tag-inserter button {
      background-color: var(--button-bg);
      border: 1px solid var(--button-border);
      border-radius: 20px;
      padding: 6px 10px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
      position: relative;
    }

    .gl-tag-inserter button:hover {
      background-color: var(--button-hover-bg);
      border: 1px solid var(--button-hover-border);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .gl-tag-inserter button::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      background-color: var(--tooltip-bg);
      color: var(--tooltip-color);
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 12px;
      white-space: pre-wrap;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 9999;
      width: 120px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .gl-tag-inserter button:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(4px);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `;

  function injectStyle() {
    if (document.getElementById('gl-tag-style')) return;
    const style = document.createElement('style');
    style.id = 'gl-tag-style';
    style.innerText = STYLE;
    document.head.appendChild(style);
  }

  function createTagButton(tag, textarea) {
    const btn = document.createElement('button');
    btn.innerHTML = `${tag.emoji} ${tag.label}`;
    btn.setAttribute('data-tooltip', tag.title);
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      const prefix = `${tag.emojiCode} ${tag.label} `;
      if (!textarea.value.startsWith(prefix)) {
        const newValue = prefix + textarea.value;
        textarea.value = newValue;

        textarea.dispatchEvent(new Event('input', { bubbles: true }));
        textarea.dispatchEvent(new Event('change', { bubbles: true }));

        textarea.focus();
      }
    });
    return btn;
  }

  function injectButtonsAboveTextarea(textarea) {
    if (textarea.dataset.glTagInjected) return;

    const wrapper = document.createElement('div');
    wrapper.className = 'gl-tag-inserter';
    TAGS.forEach(tag => wrapper.appendChild(createTagButton(tag, textarea)));

    textarea.parentNode.insertBefore(wrapper, textarea);
    textarea.dataset.glTagInjected = 'true';
  }

  function scanAndInject() {
    document.querySelectorAll('textarea').forEach(injectButtonsAboveTextarea);
  }

  injectStyle();

  const observer = new MutationObserver(() => {
    scanAndInject();
  });

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

  scanAndInject();
})();