Skip to content

Instantly share code, notes, and snippets.

@ofmarconi
Created March 28, 2025 13:29
Show Gist options
  • Save ofmarconi/5a7fcbbd35dfb9cdebd7476a8f203bca to your computer and use it in GitHub Desktop.
Save ofmarconi/5a7fcbbd35dfb9cdebd7476a8f203bca to your computer and use it in GitHub Desktop.
Adds n8n panel filters as Quick Tabs/Buttons.
javascript:!function(){let e={containerId:"quick-tag-filters",containerClass:"quick-tag-container",buttonClass:"quick-tag-button",activeClass:"quick-tag-active",selectors:{searchField:'[data-test-id="resources-list-search"]',filterButton:'[data-test-id="resources-list-filters-trigger"]',tagElements:'[data-test-id="workflow-card-tags"] .n8n-tag span',filterRemoveLink:'[data-test-id="workflows-filter-reset"]',tagsDropdown:'[data-test-id="tags-dropdown"]',tagCheckboxes:".el-select-dropdown__item.tag",applyButton:'button:contains("Apply")'},styles:` .quick-tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 8px; border-radius: 4px; background-color: #f9f9f9; } .quick-tag-button { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 4px; background-color: #e0e0e0; color: #505050; font-size: 12px; cursor: pointer; border: 1px solid #ccc; transition: all 0.2s ease; } .quick-tag-button:hover { background-color: #d0d0d0; } .quick-tag-active { background-color: #14b893; color: white; border-color: #14b893; } .quick-tag-active:hover { background-color: #109e7e; } %60};function t(){let t=document.querySelectorAll(e.selectors.tagElements),l=new Set;return t.forEach(e=>{let t=e.textContent.trim();t&&l.add(t)}),Array.from(l).sort()}function l(t){setTimeout(()=>{let l=document.querySelector(e.selectors.tagsDropdown);if(l){let s=l.querySelector("input");s&&(s.click(),setTimeout(()=>{let l=document.querySelectorAll(e.selectors.tagCheckboxes),s=!1;l.forEach(e=>{e.textContent.trim()===t&&(e.click(),s=!0)}),s&&setTimeout(()=>{let e=Array.from(document.querySelectorAll("button")).find(e=>e.textContent.includes("Apply"));e&&e.click()},300)},300))}},300)}function s(){document.querySelectorAll(%60.${e.buttonClass}%60).forEach(t=>{"Todos"===t.textContent?t.classList.add(e.activeClass):t.classList.remove(e.activeClass)});let t=document.querySelector(e.selectors.filterRemoveLink);t&&t.click()}!function t(l,s=10,o=0){let r=document.querySelector(e.selectors.filterButton);r?l():o<s?setTimeout(()=>t(l,s,o+1),300):console.error("Bot\xe3o de filtro n\xe3o encontrado ap\xf3s v\xe1rias tentativas")}(()=>{let o=t();o.length>0?function t(o){let r=document.getElementById(e.containerId);if(r&&r.remove(),!document.getElementById("quick-tag-styles")){let a=document.createElement("style");a.id="quick-tag-styles",a.textContent=e.styles,document.head.appendChild(a)}let n=document.createElement("div");n.id=e.containerId,n.className=e.containerClass;let c=document.createElement("button");c.className=e.buttonClass,c.textContent="Todos",c.addEventListener("click",s),n.appendChild(c),o.forEach(t=>{let s=document.createElement("button");s.className=e.buttonClass,s.textContent=function e(t){let l=document.createElement("div");return l.textContent=t,l.innerHTML}(t),s.dataset.tag=t,s.addEventListener("click",()=>(function t(s,o){document.querySelectorAll(%60.${e.buttonClass}%60).forEach(t=>{t.classList.remove(e.activeClass)}),o.classList.add(e.activeClass);let r=document.querySelector(e.selectors.filterRemoveLink);if(r)r.click(),setTimeout(()=>{let t=document.querySelector(e.selectors.filterButton);t&&(t.click(),l(s))},300);else{let a=document.querySelector(e.selectors.filterButton);a&&(a.click(),l(s))}})(t,s)),n.appendChild(s)});let i=document.querySelector(e.selectors.searchField);if(i){let d=i.closest(".mt-xs")||i.closest("._filters-row_rpuur_123")||i.closest("div");d&&d.parentNode.insertBefore(n,d.nextSibling)}(function t(){let l=document.querySelector('.mt-xs[style*="display: block"], .mt-xs:not([style*="display: none"])');if(l){let s=document.querySelectorAll(%60.${e.buttonClass}%60);s.forEach(t=>{t.classList.remove(e.activeClass)});let o=document.querySelector(%60${e.selectors.filterButton} .n8n-badge%60);if(o){let r=new Set,a=document.querySelectorAll(e.selectors.tagElements);if(a.forEach(e=>{r.add(e.textContent.trim())}),1===r.size){let n=r.values().next().value;s.forEach(t=>{t.dataset.tag===n&&t.classList.add(e.activeClass)})}}}else{let c=document.querySelector(%60.${e.buttonClass}:not([data-tag])%60);c&&c.classList.add(e.activeClass)}})()}(o):console.log("Nenhuma tag encontrada nos workflows vis\xedveis.")}),t().length}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment