Toggle days filter via icon and persist filter value

web/trade-fairs.js

@@ -1,6 +1,8 @@
 (function initTradeFairsSubpage() {
   const tableBody = document.getElementById('tradeFairTableBody');
   const searchInput = document.getElementById('tradeFairSearchInput');
+  const daysFilterContainer = document.getElementById('tradeFairDaysFilterContainer');
+  const daysFilterToggle = document.getElementById('tradeFairDaysFilterToggle');
   const daysFilterInput = document.getElementById('tradeFairDaysFilterInput');
   const meta = document.getElementById('tradeFairMeta');
   const columnSettingsBtn = document.getElementById('tradeFairColumnSettingsBtn');
@@ -17,6 +19,7 @@
   const COLUMN_ORDER_STATE_KEY = 'fb_trade_fairs_columns_v1';
   const COLUMN_VISIBILITY_STATE_KEY = 'fb_trade_fairs_column_visibility_v1';
   const LAST_OPEN_STATE_KEY = 'fb_trade_fairs_last_open_v1';
+  const DAYS_FILTER_STATE_KEY = 'fb_trade_fairs_days_filter_v1';
   const DEFAULT_COLUMN_ORDER = [
     'tage_bis_start',
     'rang',
@@ -721,6 +724,7 @@
   let sortDirection = 'asc';
   let searchTerm = '';
   let daysFilterTerm = '';
+  let isDaysFilterOpen = false;
   let draggedColumnKey = null;
   let lastOpenedByTradeFair = {};
   let columnVisibility = Object.fromEntries(DEFAULT_COLUMN_ORDER.map((key) => [key, true]));
@@ -1365,6 +1369,51 @@
     return `Als Bookmark-Suche oeffnen (3 Tabs)\\nZuletzt geoeffnet: ${suffix}`;
   }
 
+  function loadDaysFilterState() {
+    try {
+      const raw = localStorage.getItem(DAYS_FILTER_STATE_KEY);
+      if (typeof raw !== 'string') {
+        return '';
+      }
+      return raw.trim();
+    } catch (_error) {
+      return '';
+    }
+  }
+
+  function persistDaysFilterState() {
+    try {
+      localStorage.setItem(DAYS_FILTER_STATE_KEY, daysFilterTerm);
+    } catch (_error) {
+      // ignore
+    }
+  }
+
+  function updateDaysFilterToggleState() {
+    if (!daysFilterToggle) {
+      return;
+    }
+    daysFilterToggle.classList.toggle('is-active', Boolean(daysFilterTerm));
+  }
+
+  function setDaysFilterOpen(nextOpen, options = {}) {
+    isDaysFilterOpen = Boolean(nextOpen);
+
+    if (daysFilterContainer) {
+      daysFilterContainer.classList.toggle('is-filter-open', isDaysFilterOpen);
+    }
+
+    if (daysFilterToggle) {
+      daysFilterToggle.classList.toggle('is-open', isDaysFilterOpen);
+      daysFilterToggle.setAttribute('aria-expanded', isDaysFilterOpen ? 'true' : 'false');
+    }
+
+    if (options.focus && isDaysFilterOpen && daysFilterInput) {
+      daysFilterInput.focus();
+      daysFilterInput.select();
+    }
+  }
+
   function loadSortState() {
     try {
       const raw = localStorage.getItem(SORT_STATE_KEY);
@@ -1727,13 +1776,54 @@
     render();
   });
 
+  if (daysFilterToggle) {
+    daysFilterToggle.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setDaysFilterOpen(!isDaysFilterOpen, { focus: true });
+    });
+  }
+
   if (daysFilterInput) {
     daysFilterInput.addEventListener('input', () => {
       daysFilterTerm = daysFilterInput.value.trim();
+      persistDaysFilterState();
+      updateDaysFilterToggleState();
       render();
     });
+
+    daysFilterInput.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        setDaysFilterOpen(false);
+        if (daysFilterToggle) {
+          daysFilterToggle.focus();
+        }
+      }
+    });
   }
 
+  if (daysFilterContainer) {
+    document.addEventListener('click', (event) => {
+      if (!isDaysFilterOpen) {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (!daysFilterContainer.contains(target)) {
+        setDaysFilterOpen(false);
+      }
+    });
+  }
+
+  daysFilterTerm = loadDaysFilterState();
+  if (daysFilterInput) {
+    daysFilterInput.value = daysFilterTerm;
+  }
+  updateDaysFilterToggleState();
+  setDaysFilterOpen(false);
+
   lastOpenedByTradeFair = loadLastOpenedState();
   loadColumnOrder();
   loadColumnVisibility();