feat: Add Ombi request filtering and search

- Add request filters UI (type, status, sort, search)
- Implement dual-layer filtering (server + client)
- Add ombiFilters utility for consistent filtering logic
- Persist filter preferences in localStorage
- Add SSE support for real-time Ombi request updates
- Add webhook endpoints for Ombi integration
- Update OpenAPI spec for new endpoints
- Add unit tests for filter logic and UI
- Add integration tests for Ombi routes

client/src/ui/requestFilters.js

@@ -0,0 +1,227 @@
+// Copyright (c) 2026 Gordon Bolton. MIT License.
+
+import { state } from '../state.js';
+import {
+  saveRequestTypes,
+  saveRequestStatuses,
+  saveRequestSort,
+  saveRequestSearch
+} from '../utils/storage.js';
+import { renderRequests } from './requests.js';
+
+// ---- Type filter dropdown ----
+
+function initTypeFilter() {
+  const btn = document.getElementById('request-type-filter-btn');
+  const dropdown = document.getElementById('request-type-filter-dropdown');
+  const selectAll = document.getElementById('request-type-select-all');
+  const deselectAll = document.getElementById('request-type-deselect-all');
+
+  if (!btn || !dropdown) return;
+
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    dropdown.classList.toggle('open');
+  });
+
+  selectAll?.addEventListener('click', () => setAllTypes(true));
+  deselectAll?.addEventListener('click', () => setAllTypes(false));
+
+  // Wire up checkboxes
+  const checkboxes = dropdown.querySelectorAll('.request-filter-checkbox');
+  checkboxes.forEach(cb => {
+    cb.addEventListener('change', () => {
+      const value = cb.closest('.request-filter-option').dataset.value;
+      toggleType(value, cb.checked);
+    });
+  });
+
+  updateTypeFilterUI();
+}
+
+function setAllTypes(checked) {
+  const dropdown = document.getElementById('request-type-filter-dropdown');
+  const checkboxes = dropdown.querySelectorAll('.request-filter-checkbox');
+  const newTypes = [];
+  checkboxes.forEach(cb => {
+    cb.checked = checked;
+    if (checked) newTypes.push(cb.closest('.request-filter-option').dataset.value);
+  });
+  state.selectedRequestTypes = checked ? newTypes : [];
+  saveRequestTypes(state.selectedRequestTypes);
+  updateTypeFilterUI();
+  renderRequests();
+}
+
+function toggleType(value, checked) {
+  const idx = state.selectedRequestTypes.indexOf(value);
+  if (checked && idx === -1) {
+    state.selectedRequestTypes.push(value);
+  } else if (!checked && idx > -1) {
+    state.selectedRequestTypes.splice(idx, 1);
+  }
+  saveRequestTypes(state.selectedRequestTypes);
+  updateTypeFilterUI();
+  renderRequests();
+}
+
+function updateTypeFilterUI() {
+  const text = document.getElementById('request-type-selected-text');
+  if (!text) return;
+
+  const dropdown = document.getElementById('request-type-filter-dropdown');
+  const checkboxes = dropdown.querySelectorAll('.request-filter-checkbox');
+  checkboxes.forEach(cb => {
+    const value = cb.closest('.request-filter-option').dataset.value;
+    cb.checked = state.selectedRequestTypes.includes(value);
+  });
+
+  if (state.selectedRequestTypes.length === 0) {
+    text.textContent = 'None';
+  } else if (state.selectedRequestTypes.length === checkboxes.length) {
+    text.textContent = 'All';
+  } else {
+    text.textContent = state.selectedRequestTypes.length;
+  }
+}
+
+// ---- Status filter dropdown ----
+
+function initStatusFilter() {
+  const btn = document.getElementById('request-status-filter-btn');
+  const dropdown = document.getElementById('request-status-filter-dropdown');
+  const selectAll = document.getElementById('request-status-select-all');
+  const deselectAll = document.getElementById('request-status-deselect-all');
+
+  if (!btn || !dropdown) return;
+
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    dropdown.classList.toggle('open');
+  });
+
+  selectAll?.addEventListener('click', () => setAllStatuses(true));
+  deselectAll?.addEventListener('click', () => setAllStatuses(false));
+
+  const checkboxes = dropdown.querySelectorAll('.request-filter-checkbox');
+  checkboxes.forEach(cb => {
+    cb.addEventListener('change', () => {
+      const value = cb.closest('.request-filter-option').dataset.value;
+      toggleStatus(value, cb.checked);
+    });
+  });
+
+  updateStatusFilterUI();
+}
+
+function setAllStatuses(checked) {
+  const dropdown = document.getElementById('request-status-filter-dropdown');
+  const checkboxes = dropdown.querySelectorAll('.request-filter-checkbox');
+  const newStatuses = [];
+  checkboxes.forEach(cb => {
+    cb.checked = checked;
+    if (checked) newStatuses.push(cb.closest('.request-filter-option').dataset.value);
+  });
+  state.selectedRequestStatuses = checked ? newStatuses : [];
+  saveRequestStatuses(state.selectedRequestStatuses);
+  updateStatusFilterUI();
+  renderRequests();
+}
+
+function toggleStatus(value, checked) {
+  const idx = state.selectedRequestStatuses.indexOf(value);
+  if (checked && idx === -1) {
+    state.selectedRequestStatuses.push(value);
+  } else if (!checked && idx > -1) {
+    state.selectedRequestStatuses.splice(idx, 1);
+  }
+  saveRequestStatuses(state.selectedRequestStatuses);
+  updateStatusFilterUI();
+  renderRequests();
+}
+
+function updateStatusFilterUI() {
+  const text = document.getElementById('request-status-selected-text');
+  if (!text) return;
+
+  const dropdown = document.getElementById('request-status-filter-dropdown');
+  const checkboxes = dropdown.querySelectorAll('.request-filter-checkbox');
+  checkboxes.forEach(cb => {
+    const value = cb.closest('.request-filter-option').dataset.value;
+    cb.checked = state.selectedRequestStatuses.includes(value);
+  });
+
+  if (state.selectedRequestStatuses.length === 0) {
+    text.textContent = 'All';
+  } else if (state.selectedRequestStatuses.length === checkboxes.length) {
+    text.textContent = 'All';
+  } else {
+    text.textContent = state.selectedRequestStatuses.length;
+  }
+}
+
+// ---- Sort select ----
+
+function initSortSelect() {
+  const select = document.getElementById('request-sort-select');
+  if (!select) return;
+
+  select.value = state.requestSortMode;
+  select.addEventListener('change', (e) => {
+    state.requestSortMode = e.target.value;
+    saveRequestSort(state.requestSortMode);
+    renderRequests();
+  });
+}
+
+// ---- Search input ----
+
+function initSearchInput() {
+  const input = document.getElementById('request-search-input');
+  if (!input) return;
+
+  input.value = state.requestSearchQuery;
+
+  let debounceTimer;
+  input.addEventListener('input', (e) => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      state.requestSearchQuery = e.target.value;
+      saveRequestSearch(state.requestSearchQuery);
+      renderRequests();
+    }, 200);
+  });
+}
+
+// ---- Global click-outside handler ----
+
+function initClickOutside() {
+  document.addEventListener('click', (e) => {
+    const typeDropdown = document.getElementById('request-type-filter-dropdown');
+    const typeBtn = document.getElementById('request-type-filter-btn');
+    const statusDropdown = document.getElementById('request-status-filter-dropdown');
+    const statusBtn = document.getElementById('request-status-filter-btn');
+
+    if (typeDropdown && !typeDropdown.contains(e.target) && e.target !== typeBtn && !typeBtn?.contains(e.target)) {
+      typeDropdown.classList.remove('open');
+    }
+    if (statusDropdown && !statusDropdown.contains(e.target) && e.target !== statusBtn && !statusBtn?.contains(e.target)) {
+      statusDropdown.classList.remove('open');
+    }
+  });
+}
+
+// ---- Public API ----
+
+export function initRequestFilters() {
+  initTypeFilter();
+  initStatusFilter();
+  initSortSelect();
+  initSearchInput();
+  initClickOutside();
+
+  // Listen for SSE updates (registered once on app bootstrap)
+  document.addEventListener('ombiRequestsUpdated', () => {
+    renderRequests();
+  });
+}

client/src/ui/requests.js

@@ -2,12 +2,15 @@
 
 import { state } from '../state.js';
 import { escapeHtml } from '../utils/format.js';
+import { applyRequestFilters, getRequestStatus } from '../utils/ombiFilters.js';
 
 /**
  * Helper function to extract the username from an Ombi request object.
  * The Ombi API returns requestedUser as an OmbiStore.Entities.OmbiUser object,
  * not a string, so we need to extract the username from the object.
- * 
+ *
+ * Must stay in sync with server/utils/ombiHelpers.js
+ *
  * @param {Object} request - The Ombi request object
  * @returns {string} The extracted username, or empty string if not found
  */
@@ -38,16 +41,34 @@ export function renderRequests() {
     ...ombiRequests.tv.map(r => ({ ...r, mediaType: 'tv' }))
   ];
 
+  // Apply client-side filters, sorting, and search
+  const filtered = applyRequestFilters(allRequests, {
+    types: state.selectedRequestTypes,
+    statuses: state.selectedRequestStatuses,
+    sort: state.requestSortMode,
+    search: state.requestSearchQuery
+  });
+
   requestsList.innerHTML = '';
 
-  if (allRequests.length === 0) {
-    if (noRequests) noRequests.style.display = 'block';
+  if (filtered.length === 0) {
+    if (noRequests) {
+      noRequests.style.display = 'block';
+      const p = noRequests.querySelector('p');
+      if (p) {
+        // Differentiate between no data from Ombi vs filters excluded everything
+        const hasAnyData = allRequests.length > 0;
+        p.textContent = hasAnyData
+          ? 'No requests match your filters.'
+          : 'No requests found.';
+      }
+    }
     return;
   }
 
   if (noRequests) noRequests.style.display = 'none';
 
-  allRequests.forEach(request => {
+  filtered.forEach(request => {
     const card = createRequestCard(request);
     requestsList.appendChild(card);
   });
@@ -102,7 +123,7 @@ function createRequestCard(request) {
   const actions = document.createElement('div');
   actions.className = 'request-actions';
 
-  if (request.theMovieDbId) {
+  if (state.ombiBaseUrl && request.theMovieDbId) {
     const ombiLink = document.createElement('a');
     ombiLink.className = 'request-link ombi-link';
     ombiLink.href = `${state.ombiBaseUrl}/details/${request.mediaType}/${request.theMovieDbId}`;
@@ -129,46 +150,18 @@ function createStatusBadge(request) {
   const badge = document.createElement('span');
   badge.className = 'request-status-badge';
 
-  let status = 'unknown';
-  let text = 'Unknown';
-
-  if (request.available) {
-    status = 'available';
-    text = 'Available';
-  } else if (request.approved) {
-    status = 'approved';
-    text = 'Approved';
-  } else if (request.denied) {
-    status = 'denied';
-    text = `Denied: ${request.deniedReason || 'No reason'}`;
-  } else if (request.requested) {
-    status = 'pending';
-    text = 'Pending';
-  }
+  const status = getRequestStatus(request);
+  const statusTexts = {
+    available: 'Available',
+    denied: `Denied: ${request.deniedReason || 'No reason'}`,
+    approved: 'Approved',
+    pending: 'Pending',
+    unknown: 'Unknown'
+  };
 
   badge.classList.add(status);
-  badge.textContent = text;
+  badge.textContent = statusTexts[status] || 'Unknown';
 
   return badge;
 }
 
-export function setupRequestsTab() {
-  // Listen for SSE updates
-  if (state.sseSource) {
-    state.sseSource.addEventListener('message', (event) => {
-      const data = JSON.parse(event.data);
-      if (data.ombiRequests) {
-        state.ombiRequests = data.ombiRequests;
-        renderRequests();
-      }
-    });
-  }
-
-  // Also listen for custom event triggered from sse.js
-  document.addEventListener('ombiRequestsUpdated', () => {
-    renderRequests();
-  });
-
-  // Initial render
-  renderRequests();
-}

client/src/ui/tabs.js

@@ -2,7 +2,6 @@
 
 import { getActiveTab, saveActiveTab } from '../utils/storage.js';
 import { loadHistory } from './history.js';
-import { setupRequestsTab } from './requests.js';
 
 export function initTabs() {
   const downloadsTab = document.querySelector('[data-tab="downloads"]');
@@ -55,7 +54,6 @@ export function activateTab(tab) {
     if (requestsSection) requestsSection.classList.remove('hidden');
     saveActiveTab('requests');
     setupRequestsTab();
-  } else if (tab === 'history') {
     if (historyTab) historyTab.classList.add('active');
     if (historySection) historySection.classList.remove('hidden');
     saveActiveTab('history');