Refine program library toolbar defaults

public/app.js

@@ -7,6 +7,7 @@ const searchInput = document.querySelector('#search');
 const categoryFilter = document.querySelector('#category-filter');
 const languageFilter = document.querySelector('#language-filter');
 const sortOrder = document.querySelector('#sort-order');
+const resetFiltersButton = document.querySelector('#reset-filters');
 const gridViewButton = document.querySelector('#grid-view');
 const listViewButton = document.querySelector('#list-view');
 const sourceModal = document.querySelector('#source-modal');
@@ -136,7 +137,7 @@ function appendProgramBatch() {
   visibleProgramCount = nextCount;
   programSentinel.hidden = visibleProgramCount >= filteredPrograms.length;
   status.className = 'status';
-  status.textContent = `${visibleProgramCount} of ${filteredPrograms.length} matching programs shown · ${allPrograms.length} total`;
+  status.textContent = `${filteredPrograms.length} matching ${filteredPrograms.length === 1 ? 'program' : 'programs'}`;
 }
 
 function observeProgramSentinel() {
@@ -289,7 +290,17 @@ function setCategory(category) {
   renderPrograms();
 }
 
+function resetFilters() {
+  searchInput.value = '';
+  categoryFilter.value = '';
+  languageFilter.value = '';
+  sortOrder.value = 'newest';
+  if (location.pathname !== '/') history.pushState({}, '', '/');
+  renderPrograms();
+}
+
 refreshButton.addEventListener('click', loadPrograms);
+resetFiltersButton.addEventListener('click', resetFilters);
 searchInput.addEventListener('input', renderPrograms);
 categoryFilter.addEventListener('change', () => setCategory(categoryFilter.value));
 languageFilter.addEventListener('change', renderPrograms);

public/index.html

@@ -11,7 +11,6 @@
 <body>
   <header class="site-header">
     <a class="brand" href="/">C64 Program Collection</a>
-    <span>VICE x64sc · WebAssembly</span>
   </header>
   <main>
     <section id="library" class="panel">
@@ -38,12 +37,13 @@
         <label>
           <span class="sr-only">Sort programs</span>
           <select id="sort-order">
+            <option value="newest">Sort: Newest first</option>
             <option value="title">Sort: Title</option>
             <option value="category">Sort: Category</option>
-            <option value="newest">Sort: Newest first</option>
             <option value="oldest">Sort: Oldest first</option>
           </select>
         </label>
+        <button id="reset-filters" class="reset-button" type="button">Reset</button>
         <div class="view-switcher" role="group" aria-label="View style">
           <button id="grid-view" class="view-button active" type="button" aria-pressed="true" title="Grid view">▦</button>
           <button id="list-view" class="view-button" type="button" aria-pressed="false" title="List view">☷</button>

public/styles.css

@@ -30,6 +30,9 @@ h1 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
 .view-button { min-width: 42px; padding: .4rem; background: transparent; color: var(--c64-lightest-blue); font-size: 1.2rem; }
 .view-button.active { background: var(--c64-light-blue); color: #fff; }
 .toolbar-button { padding: 0 .9rem; }
+.reset-button { align-self: center; height: auto; margin: 0; padding: .35rem .45rem; border: 0; background: transparent; color: #aaa5ce; font-size: .78rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2rem; }
+.reset-button:hover { color: #fff; text-decoration-color: currentColor; }
+.reset-button:focus-visible { outline: 2px solid var(--c64-light-blue); outline-offset: 2px; }
 .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
 .program-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 1.25rem; border: 1px solid #b8b1e733; border-radius: 14px; background: #211a59d9; color: #fff; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
 .program-card:hover { transform: translateY(-3px); border-color: var(--c64-light-blue); }