✨ Feature Request
Description
Add a centralized "Clear All" button to the search sidebar that dynamically appears whenever one or more active filters (languages, technologies, or categories) are applied. Clicking this button will instantly clear all selections and reset the repository grid view back to the full list of organizations.
Problem it Solves
Currently, if a user selects multiple programming languages and filter chips to narrow down their search, they have to manually uncheck or deselect each filter chip individually to reset their view back to the default state. This adds unnecessary clicks and degrades the user experience, especially when navigating quickly across different tech stacks.
Proposed Solution
- HTML & CSS:
- Add a
<button id="clearAllFilters" class="hidden">Clear All</button> next to or inside the filter section headers.
- Style it to match the existing dark/modern CSS theme using existing color tokens. It should be hidden by default using the
.hidden utility class.
- JavaScript (
app.js):
- Toggle Visibility: Inside the main filtering/state logic, check if the active filter array or state length is greater than
0. If filters are active, remove the .hidden class; if not, add it back.
- State Reset: Adhering to the project's Zero Inline Handlers and native DOM manipulation guidelines, attach a standard event listener to the button:
document.getElementById('clearAllFilters').addEventListener('click', () => {
// 1. Reset active filter arrays/objects back to empty arrays
// 2. Remove active CSS classes from the selected DOM elements/chips
// 3. Re-trigger the primary search/render function to restore the full list
});
Alternatives Considered
- Reloading the Page: A simple browser refresh resets the filters, but it breaks the fluid Single Page Application (SPA) feel and causes unnecessary network/DOM parsing overhead.
- Keeping it visible at all times: Leaving a permanent "Clear All" button visible even when zero filters are selected creates UI clutter and leads to a confusing user experience.
Additional Context
This enhancement aligns perfectly with the repository's strict zero-build, zero-dependency philosophy by utilizing clean event delegation and native DOM manipulation without relying on external UI libraries.
✨ Feature Request
Description
Add a centralized "Clear All" button to the search sidebar that dynamically appears whenever one or more active filters (languages, technologies, or categories) are applied. Clicking this button will instantly clear all selections and reset the repository grid view back to the full list of organizations.
Problem it Solves
Currently, if a user selects multiple programming languages and filter chips to narrow down their search, they have to manually uncheck or deselect each filter chip individually to reset their view back to the default state. This adds unnecessary clicks and degrades the user experience, especially when navigating quickly across different tech stacks.
Proposed Solution
<button id="clearAllFilters" class="hidden">Clear All</button>next to or inside the filter section headers..hiddenutility class.app.js):0. If filters are active, remove the.hiddenclass; if not, add it back.Alternatives Considered
Additional Context
This enhancement aligns perfectly with the repository's strict zero-build, zero-dependency philosophy by utilizing clean event delegation and native DOM manipulation without relying on external UI libraries.