feat: filter Find Work by repository and label (Closes #681)

frontend/dashboard.css

@@ -458,6 +458,14 @@ textarea { resize: vertical; min-height: 120px; }
 .find-work-search { position:sticky; top:0; z-index:2; display:grid; gap:6px; padding:8px 0; background:#0b1526; }
 .find-work-search > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
 .find-work-search input, .find-work-search button { min-height:44px; }
+.find-work-filters { border:1px solid #2a496e; border-radius:10px; padding:10px; }
+.find-work-filters summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
+.find-work-filter-panel, .find-work-filter-options { display:grid; gap:8px; }
+.find-work-filter-panel fieldset { min-width:0; border:0; padding:6px 0; margin:0; }
+.find-work-filter-options { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
+.find-work-filter-option { min-height:44px; display:flex; align-items:center; gap:8px; padding:6px; overflow-wrap:anywhere; }
+.find-work-filter-option input { width:20px; height:20px; flex:0 0 auto; }
+#clear-find-work-filters { min-height:44px; width:100%; }
 .find-work-list { display:grid; gap:10px; }
 .find-work-card { display:grid; gap:8px; padding:12px; border:1px solid #2a496e; border-radius:12px; background:#101f36; overflow-wrap:anywhere; }
 .find-work-card.selected { border-color:#60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,.25); }

frontend/index.html

@@ -541,6 +541,14 @@
       <button id="clear-find-work-search" type="button" hidden>Clear</button></div>
       <span id="find-work-match-status" class="small" aria-live="polite"></span>
     </form>
+    <details class="find-work-filters" id="find-work-filters">
+      <summary>Filter work <span id="find-work-filter-count" class="small"></span></summary>
+      <div class="find-work-filter-panel" aria-label="Filter available work">
+        <fieldset><legend>Repositories</legend><div id="find-work-repository-filters" class="find-work-filter-options"></div></fieldset>
+        <fieldset><legend>Labels</legend><div id="find-work-label-filters" class="find-work-filter-options"></div></fieldset>
+        <button id="clear-find-work-filters" type="button">Clear filters</button>
+      </div>
+    </details>
     <button class="fill-find-work-today" id="fill-find-work-today" type="button"
       aria-describedby="find-work-selection-status">Fill remaining Today slots</button>
     <div id="find-work-status" class="small" aria-live="assertive">Open Find Work to load available issues.</div>

frontend/pick-work.js

@@ -1,9 +1,11 @@
-function createFindWork({ fetchJson, onItems, onPagination, onStatus, onSelection = () => {} }) {
+function createFindWork({ fetchJson, onItems, onPagination, onStatus, onSelection = () => {}, onFacets = () => {} }) {
   let available = [];
   let pagination = { page: 1, total: 0, has_more: false };
   let loadRequest = null;
   let loadGeneration = 0;
   let query = '';
+  let filters = { repositories: [], labels: [] };
+  let facetView;
   let claimRequest = null;
   const previewed = new Set();
   let selecting = false;
@@ -41,12 +43,27 @@ function createFindWork({ fetchJson, onItems, onPagination, onStatus, onSelectio
     };
     onItems(available.slice());
     onPagination({ ...pagination });
+    if (result?.facets) onFacets({
+      repositories: Array.isArray(result.facets.repositories) ? result.facets.repositories.slice() : [],
+      labels: Array.isArray(result.facets.labels) ? result.facets.labels.slice() : [],
+    });
+    if (result?.facets && typeof document !== 'undefined') {
+      facetView ||= attachFindWorkFacets(document.querySelector('#find-work-filters'), value =>
+        String(value).replace(/[&<>"']/g, character => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[character])),
+      next => { filters = next; loadPage(1, false); });
+      facetView(result.facets);
+    }
   }
 
   function loadPage(page, append, requestedQuery = query) {
     if (loadRequest && requestedQuery === query && append) return loadRequest;
     const generation = ++loadGeneration;
-    const queryPart = requestedQuery ? '&q=' + encodeURIComponent(requestedQuery) : '';
+    const params = new URLSearchParams();
+    params.set('facets', 'true');
+    if (requestedQuery) params.set('q', requestedQuery);
+    filters.repositories.forEach(value => params.append('repository', value));
+    filters.labels.forEach(value => params.append('label', value));
+    const queryPart = params.toString() ? '&' + params.toString() : '';
     const request = fetchJson('api/v1/available-issues?page=' + page + queryPart, {
       headers: { Accept: 'application/json' },
     }).then(result => {
@@ -81,6 +98,17 @@ function createFindWork({ fetchJson, onItems, onPagination, onStatus, onSelectio
     query() {
       return query;
     },
+    setFilters(next) {
+      filters = {
+        repositories: Array.from(new Set((next?.repositories || []).map(String))).slice(0, 10),
+        labels: Array.from(new Set((next?.labels || []).map(String))).slice(0, 10),
+      };
+      return loadPage(1, false);
+    },
+    filters() {
+      return { repositories: filters.repositories.slice(), labels: filters.labels.slice() };
+    },
+
     items() {
       return available.slice();
     },
@@ -163,4 +191,23 @@ function createFindWork({ fetchJson, onItems, onPagination, onStatus, onSelectio
   };
 }
 
+function attachFindWorkFacets(root, escapeHtml, onChange) {
+  const values = name => Array.from(root.querySelectorAll('input[name="' + name + '"]:checked'), input => input.value);
+  root.onchange = event => event.target.type === 'checkbox' && onChange({ repositories:values('find-work-repository'), labels:values('find-work-label') });
+  root.querySelector('#clear-find-work-filters').onclick = () => {
+    root.querySelectorAll('input').forEach(input => { input.checked = false; });
+    onChange({ repositories:[], labels:[] });
+  };
+  return facets => {
+    const active = { repositories:values('find-work-repository'), labels:values('find-work-label') };
+    const render = (id, choices, selected, name) => {
+      root.querySelector(id).innerHTML = choices.map(value => '<label class="find-work-filter-option"><input type="checkbox" name="' + name + '" value="' + escapeHtml(value) + '"' + (selected.includes(value) ? ' checked' : '') + ' />' + escapeHtml(value) + '</label>').join('');
+    };
+    render('#find-work-repository-filters', facets.repositories || [], active.repositories, 'find-work-repository');
+    render('#find-work-label-filters', facets.labels || [], active.labels, 'find-work-label');
+    const count = active.repositories.length + active.labels.length;
+    root.querySelector('#find-work-filter-count').textContent = count ? '(' + count + ' active)' : '';
+  };
+}
+
 if (typeof module !== 'undefined' && module.exports) module.exports = createFindWork;