Show tag filters as tabs below the search bar for quicker filtering

Mark_Ss · March 25, 2025, 7:52am

The idea is:

Add clickable tag filters directly below the search bar (like small tabs), allowing users to quickly filter by tags without having to open the filter menu. The interface remains consistent while providing a faster way to switch between workflows grouped by tags.

My use case:

I often manage multiple workflows with different tags (e.g., “AI,” “WPP,” “SITES”). Currently, I have to click the filter icon to select each tag. Having the tags right under the search bar would let me jump from one tag to another with a single click.

I think it would be beneficial to add this because:

• It saves time by reducing the need to open the filter menu repeatedly.

• It streamlines the workflow management interface, especially for users handling many workflows.

• It visually reminds me which tags are available, ensuring better organization.

Any resources to support this?

Most modern UIs (e.g., GitHub or project management tools) often show filter tags or “tab-like” categories near the search area for quick toggling.

Are you willing to work on this?

Yes, I’m willing to assist with testing or mockups to ensure a smooth implementation.

<!-- Don't forget to upvote this request. The more votes this Feature Request gets, the higher the priority. -->

Mark_Ss · March 28, 2025, 1:29pm

As an alternative, I created a bookmarklet for me to enable on my dashboard, it would also be good as an administrator to be able to inject JS wherever I want (but that’s another suggestion)

gist.github.com

https://gist.github.com/ofmarconi/5a7fcbbd35dfb9cdebd7476a8f203bca

bookmarklet.js

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}();

TODOS = ALL in portuguese-br