Add program reminders and category filtering to the guide UI

Enhance health diagnostics with EPG quality and source metrics

src/css/modals.css

@@ -45,3 +45,53 @@
     text-transform: uppercase; padding: 8px 20px; cursor: pointer; transition: opacity 0.15s;
   }
   .modal-btn-apply:hover { opacity: 0.85; }
+
+  .pm-reminder-panel {
+    margin-top: 14px;
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    padding: 12px;
+  }
+  .pm-reminder-submenu {
+    display: none;
+    margin-top: 10px;
+    border-top: 1px solid var(--border);
+    padding-top: 10px;
+  }
+  .pm-reminder-submenu.visible { display: block; }
+  .pm-reminder-title {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 8px;
+  }
+  .pm-reminder-text,
+  .pm-reminder-status {
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--text-dim);
+  }
+  .pm-reminder-status { margin-top: 8px; }
+  .pm-reminder-status.active { color: var(--accent2); }
+  .pm-reminder-status.muted { opacity: 0.75; }
+  .pm-reminder-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 12px;
+    flex-wrap: wrap;
+  }
+  .pm-reminder-save {
+    background: var(--accent);
+    color: #000;
+  }
+  .pm-reminder-remove {
+    border: 1px solid var(--border-bright);
+    background: transparent;
+    color: var(--text);
+  }
+  .pm-reminder-save:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }

src/css/topbar.css

@@ -149,6 +149,25 @@
   .theme-select:hover { border-color: var(--accent2); color: var(--accent2); }
   .theme-select option { background: #111; color: #eee; font-family: sans-serif; }
 
+  .category-filter {
+    background: transparent;
+    border: 1px solid var(--border-bright);
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    padding: 4px 8px;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: all 0.15s;
+    flex-shrink: 0;
+    max-width: 180px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .category-filter:hover { border-color: var(--accent2); color: var(--accent2); }
+  .category-filter option { background: #111; color: #eee; font-family: sans-serif; }
+
       body { overflow: hidden; }
 
     .topbar {
@@ -159,6 +178,7 @@
     }
     .logo { font-size: 11px; }
     .clock { font-size: 14px; }
+    .category-filter { max-width: 100%; }
 
     .grid-wrapper { display: none; }
     .mobile-view { display: block; }

src/js/config.js

@@ -11,6 +11,8 @@ const DEFAULT_M3U_URL = EPG_SOURCES[0]?.m3u_url ?? '';
 const PX_PER_MIN = 5;
 const GRID_HOURS = 72;
 const CORS_PROXY = '/proxy.php?url=';
+const REMINDER_STORAGE_KEY = 'gridtv-reminders';
+const REMINDER_OFFSET_MS = 15 * 60 * 1000;
 
 // Anchor the grid 2 hours before "now", rounded down to the previous quarter-hour.
 const _d = new Date();

src/js/live.js

@@ -6,6 +6,7 @@ window.addEventListener('resize', () => {
 });
 
 window.addEventListener('load', () => {
+  refreshReminderSchedules();
   const savedSource = localStorage.getItem('gridtv-active-source');
   if (savedSource === 'personal') {
     const epg = localStorage.getItem('gridtv-personal-epg');

src/js/m3u.js

@@ -6,7 +6,10 @@ function slugify(str) {
 }
 
 async function loadM3U(url) {
-  if (!url) return;
+  if (!url) {
+    m3uStreams = {};
+    return;
+  }
   try {
     let text;
     try {

src/js/program.js

@@ -34,11 +34,13 @@ function openProgramModal(ch, p) {
   document.getElementById('pm-imdb').href =
     `https://www.imdb.com/find/?q=${encodeURIComponent(p.title)}&s=tt`;
 
+  bindReminderPanel(ch, p);
   document.getElementById('programModal').classList.add('visible');
 }
 
 function closeProgramModal() {
   document.getElementById('programModal').classList.remove('visible');
+  document.getElementById('pm-reminder-submenu')?.classList.remove('visible');
 }
 
 // Close when the overlay itself is clicked.

src/js/reminders.js

@@ -0,0 +1,202 @@
+// ── PROGRAM REMINDERS ────────────────────────────────────────────────────────
+let currentReminderProgram = null;
+let reminderTimers = {};
+
+function reminderProgramId(ch, p) {
+  return [currentEpgUrl || 'default', ch.id || ch.name, p.start?.getTime() || 0, p.title || ''].join('::');
+}
+
+function reminderPayload(ch, p) {
+  return {
+    id: reminderProgramId(ch, p),
+    source: currentEpgUrl || '',
+    channelId: ch.id || '',
+    channelName: ch.name || '',
+    title: p.title || '',
+    subtitle: p.subtitle || '',
+    start: p.start?.getTime() || 0,
+    stop: p.stop?.getTime() || 0,
+    notifyAt: Math.max(Date.now() + 5000, (p.start?.getTime() || 0) - REMINDER_OFFSET_MS)
+  };
+}
+
+function getStoredReminders() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(REMINDER_STORAGE_KEY) || '[]');
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (_) {
+    return [];
+  }
+}
+
+function saveStoredReminders(reminders) {
+  localStorage.setItem(REMINDER_STORAGE_KEY, JSON.stringify(reminders));
+}
+
+function findStoredReminder(id) {
+  return getStoredReminders().find(item => item.id === id) || null;
+}
+
+function upsertReminder(reminder) {
+  const reminders = getStoredReminders().filter(item => item.id !== reminder.id);
+  reminders.push(reminder);
+  saveStoredReminders(reminders);
+}
+
+function removeReminder(id) {
+  if (reminderTimers[id]) {
+    clearTimeout(reminderTimers[id]);
+    delete reminderTimers[id];
+  }
+  saveStoredReminders(getStoredReminders().filter(item => item.id !== id));
+  updateReminderPanel();
+}
+
+function pruneExpiredReminders() {
+  const now = Date.now();
+  const reminders = getStoredReminders().filter(item => (item.stop || item.start || 0) > now);
+  saveStoredReminders(reminders);
+  return reminders;
+}
+
+async function ensureReminderPermission() {
+  if (!('Notification' in window)) {
+    throw new Error(L.reminder_error_unsupported || 'Notifications are not supported on this browser.');
+  }
+  if (Notification.permission === 'granted') return true;
+  if (Notification.permission === 'denied') {
+    throw new Error(L.reminder_error_denied || 'Notifications were blocked in this browser.');
+  }
+  const result = await Notification.requestPermission();
+  if (result !== 'granted') {
+    throw new Error(L.reminder_error_denied || 'Notifications were blocked in this browser.');
+  }
+  return true;
+}
+
+async function showReminderNotification(reminder) {
+  const title = L.reminder_notification_title || 'Program reminder';
+  const body = (L.reminder_notification_body || '“{title}” starts at {time} on {channel}.')
+    .replace('{title}', reminder.title || '')
+    .replace('{time}', fmtTime(new Date(reminder.start)))
+    .replace('{channel}', reminder.channelName || '');
+
+  try {
+    if ('serviceWorker' in navigator) {
+      const registration = await navigator.serviceWorker.ready;
+      await registration.showNotification(title, {
+        body,
+        tag: reminder.id,
+        icon: '/assets/icon-192.png',
+        badge: '/assets/icon-192.png',
+        data: {
+          url: '/index.php',
+          reminderId: reminder.id
+        }
+      });
+      return;
+    }
+  } catch (_) {}
+
+  if ('Notification' in window && Notification.permission === 'granted') {
+    new Notification(title, { body, icon: '/assets/icon-192.png', tag: reminder.id });
+  }
+}
+
+function scheduleReminder(reminder) {
+  if (!reminder?.id) return;
+  if (reminderTimers[reminder.id]) clearTimeout(reminderTimers[reminder.id]);
+  const delay = reminder.notifyAt - Date.now();
+  if (delay <= 0) {
+    showReminderNotification(reminder).finally(() => removeReminder(reminder.id));
+    return;
+  }
+  reminderTimers[reminder.id] = setTimeout(() => {
+    showReminderNotification(reminder).finally(() => removeReminder(reminder.id));
+  }, delay);
+}
+
+function refreshReminderSchedules() {
+  Object.keys(reminderTimers).forEach(id => {
+    clearTimeout(reminderTimers[id]);
+    delete reminderTimers[id];
+  });
+  pruneExpiredReminders().forEach(scheduleReminder);
+  updateReminderPanel();
+}
+
+function reminderTimingText(p) {
+  const startMs = p && typeof p.start === 'number'
+    ? p.start
+    : (p?.start?.getTime ? p.start.getTime() : 0);
+  const notifyAt = Math.max(Date.now() + 5000, startMs - REMINDER_OFFSET_MS);
+  const deltaMinutes = Math.max(0, Math.round((startMs - notifyAt) / 60000));
+  if (deltaMinutes <= 1) return L.reminder_when_soon || 'This program starts soon. The reminder will fire almost immediately.';
+  return (L.reminder_when || 'A browser notification will be sent {minutes} minutes before broadcast.')
+    .replace('{minutes}', String(deltaMinutes));
+}
+
+function updateReminderPanel(message) {
+  const panel = document.getElementById('pm-reminder-panel');
+  const submenu = document.getElementById('pm-reminder-submenu');
+  const text = document.getElementById('pm-reminder-text');
+  const status = document.getElementById('pm-reminder-status');
+  const removeBtn = document.getElementById('pm-reminder-remove');
+  const saveBtn = document.getElementById('pm-reminder-save');
+  if (!panel || !submenu || !text || !status || !removeBtn || !saveBtn) return;
+
+  if (!currentReminderProgram) {
+    panel.style.display = 'none';
+    submenu.classList.remove('visible');
+    return;
+  }
+
+  panel.style.display = 'block';
+  const reminder = findStoredReminder(currentReminderProgram.id);
+  const hasStarted = currentReminderProgram.start <= Date.now();
+
+  text.textContent = reminderTimingText(currentReminderProgram);
+  status.textContent = message || (reminder
+    ? (L.reminder_status_set || 'Reminder active for {time}.').replace('{time}', fmtTime(new Date(reminder.notifyAt)))
+    : (hasStarted ? (L.reminder_status_started || 'This program is already airing.') : (L.reminder_status_idle || 'No reminder active.')));
+  status.className = 'pm-reminder-status' + (reminder ? ' active' : '') + (hasStarted ? ' muted' : '');
+  removeBtn.style.display = reminder ? 'inline-flex' : 'none';
+  saveBtn.disabled = hasStarted;
+}
+
+async function saveCurrentReminder() {
+  if (!currentReminderProgram) return;
+  try {
+    await ensureReminderPermission();
+    upsertReminder(currentReminderProgram);
+    scheduleReminder(currentReminderProgram);
+    updateReminderPanel(L.reminder_saved || 'Reminder enabled.');
+  } catch (error) {
+    updateReminderPanel(error.message || (L.reminder_error_generic || 'Unable to enable reminder.'));
+  }
+}
+
+function toggleReminderSubmenu() {
+  const submenu = document.getElementById('pm-reminder-submenu');
+  if (!submenu || !currentReminderProgram) return;
+  submenu.classList.toggle('visible');
+  updateReminderPanel();
+}
+
+function bindReminderPanel(ch, p) {
+  currentReminderProgram = reminderPayload(ch, p);
+  const toggleBtn = document.getElementById('pm-reminder-toggle');
+  const saveBtn = document.getElementById('pm-reminder-save');
+  const removeBtn = document.getElementById('pm-reminder-remove');
+  const submenu = document.getElementById('pm-reminder-submenu');
+  if (!toggleBtn || !saveBtn || !removeBtn || !submenu) return;
+
+  submenu.classList.remove('visible');
+  toggleBtn.onclick = () => toggleReminderSubmenu();
+  saveBtn.onclick = () => saveCurrentReminder();
+  removeBtn.onclick = () => {
+    if (currentReminderProgram) removeReminder(currentReminderProgram.id);
+    updateReminderPanel(L.reminder_removed || 'Reminder removed.');
+  };
+  updateReminderPanel();
+}

src/js/search.js

@@ -2,6 +2,7 @@
 let searchActive = false;
 let searchQuery  = '';
 let searchTimer  = null;
+let currentCategoryFilter = '';
 
 function toggleSearch() {
   const bar = document.getElementById('searchBar');
@@ -18,48 +19,94 @@ function toggleSearch() {
 function clearSearch() {
   searchQuery = '';
   document.getElementById('searchInput').value = '';
-  applySearch('');
+  applyFilters();
 }
 
 function onSearchInput(val) {
   clearTimeout(searchTimer);
   searchTimer = setTimeout(() => {
     searchQuery = val.trim().toLowerCase();
-    applySearch(searchQuery);
+    applyFilters();
   }, 350);
 }
 
-function applySearch(q) {
-  if (!q) {
-    // Restore the full channel list when the query is cleared.
-    renderAll();
-    return;
-  }
-
-  const today = new Date();
-  today.setHours(0,0,0,0);
-  const tomorrow = new Date(today.getTime() + 24*3600000);
-
-  // Keep channels whose name matches or that have a matching program today.
-  const filtered = channels.filter(ch => {
-    // Match against the channel name.
-    if (ch.name.toLowerCase().includes(q)) return true;
-    // Match against today's programs (title + description).
-    return (programs[ch.id]||[]).some(p => {
-      if (p.stop < today || p.start > tomorrow) return false;
-      if (p.title.toLowerCase().includes(q)) return true;
-      if (p.desc && p.desc.toLowerCase().includes(q)) return true;
-      if ((p.categories || []).some(cat => cat.toLowerCase().includes(q))) return true;
-      return false;
-    });
-  });
-
-  renderFiltered(filtered, q);
+function programMatchesQuery(p, q) {
+  if (!q) return true;
+  if (p.title.toLowerCase().includes(q)) return true;
+  if (p.desc && p.desc.toLowerCase().includes(q)) return true;
+  if ((p.categories || []).some(cat => cat.toLowerCase().includes(q))) return true;
+  return false;
 }
 
-function renderFiltered(filteredChannels, q) {
+function programMatchesCategory(p, category) {
+  if (!category) return true;
+  const key = normalizeCategory(category);
+  return (p.categories || []).some(cat => normalizeCategory(cat) === key);
+}
+
+function getFilteredChannels(q, category) {
+  const qNorm = (q || '').trim().toLowerCase();
+  const nowStart = new Date(GRID_START);
+  const nowEnd = new Date(GRID_END);
+
+  return channels.filter(ch => {
+    const channelMatchesQuery = qNorm ? ch.name.toLowerCase().includes(qNorm) : false;
+    const items = programs[ch.id] || [];
+    const matchingProgram = items.some(p => {
+      if (p.stop < nowStart || p.start > nowEnd) return false;
+      if (!programMatchesCategory(p, category)) return false;
+      if (!qNorm) return true;
+      return programMatchesQuery(p, qNorm);
+    });
+    if (category) return matchingProgram;
+    return channelMatchesQuery || matchingProgram || (!qNorm && !category);
+  });
+}
+
+function applyFilters() {
+  const q = searchQuery;
+  const category = currentCategoryFilter;
+  if (!q && !category) {
+    renderUnfiltered();
+    return;
+  }
+  renderFiltered(getFilteredChannels(q, category), q, category);
+}
+
+function setCategoryFilter(value) {
+  currentCategoryFilter = value || '';
+  const select = document.getElementById('categoryFilter');
+  if (select && select.value !== currentCategoryFilter) select.value = currentCategoryFilter;
+  applyFilters();
+}
+
+function refreshCategoryFilterOptions() {
+  const select = document.getElementById('categoryFilter');
+  if (!select) return;
+  const previous = currentCategoryFilter;
+  select.innerHTML = '';
+  const baseOption = document.createElement('option');
+  baseOption.value = '';
+  baseOption.textContent = L.category_all || 'All categories';
+  select.appendChild(baseOption);
+  availableCategories.forEach(category => {
+    const option = document.createElement('option');
+    option.value = category;
+    option.textContent = category;
+    select.appendChild(option);
+  });
+  if (previous && availableCategories.some(category => normalizeCategory(category) === normalizeCategory(previous))) {
+    select.value = availableCategories.find(category => normalizeCategory(category) === normalizeCategory(previous)) || '';
+    currentCategoryFilter = select.value;
+  } else {
+    currentCategoryFilter = '';
+    select.value = '';
+  }
+}
+
+function renderFiltered(filteredChannels, q, category) {
   if (isMobile()) {
-    renderMobileFiltered(filteredChannels, q);
+    renderMobileFiltered(filteredChannels, q, category);
     return;
   }
 
@@ -102,7 +149,12 @@ function renderFiltered(filteredChannels, q) {
     row.className = 'program-row';
     row.style.cssText = `top:${i*ROW_H}px;position:absolute;left:0;right:0;`;
 
-    (programs[ch.id]||[]).filter(p => p.stop > GRID_START && p.start < GRID_END).forEach(p => {
+    const channelMatchesQuery = q ? ch.name.toLowerCase().includes(q) : false;
+    (programs[ch.id]||[]).filter(p => {
+      if (!(p.stop > GRID_START && p.start < GRID_END)) return false;
+      if (!programMatchesCategory(p, category)) return false;
+      return true;
+    }).forEach(p => {
       const x = Math.max(0, msToX(p.start.getTime()));
       const w = Math.min(TOTAL_WIDTH_PX, msToX(p.stop.getTime())) - x;
       if (w < 2) return;
@@ -112,10 +164,13 @@ function renderFiltered(filteredChannels, q) {
 
       // Highlight programs that match the current search query.
       const matchesProg =
-        p.title.toLowerCase().includes(q) ||
-        (p.desc && p.desc.toLowerCase().includes(q)) ||
-        (p.categories || []).some(cat => cat.toLowerCase().includes(q));
+        !!q && (
+          p.title.toLowerCase().includes(q) ||
+          (p.desc && p.desc.toLowerCase().includes(q)) ||
+          (p.categories || []).some(cat => cat.toLowerCase().includes(q))
+        );
       if (matchesProg) block.classList.add('search-match');
+      if (category && !matchesProg && !channelMatchesQuery) block.classList.add('search-match');
 
       if (p.stop < now) block.classList.add('is-past');
       if (p.start <= now && p.stop > now) {
@@ -144,7 +199,7 @@ function renderFiltered(filteredChannels, q) {
   positionNowLine();
 }
 
-function renderMobileFiltered(filteredChannels, q) {
+function renderMobileFiltered(filteredChannels, q, category) {
   const container = document.getElementById('mobileView');
   container.innerHTML = '';
   const now = new Date();
@@ -152,7 +207,12 @@ function renderMobileFiltered(filteredChannels, q) {
   const winEnd   = new Date(now.getTime() + 4*3600000);
 
   filteredChannels.forEach(ch => {
-    const progs = (programs[ch.id]||[]).filter(p => p.stop > winStart && p.start < winEnd);
+    const channelMatchesQuery = q ? ch.name.toLowerCase().includes(q) : false;
+    const progs = (programs[ch.id]||[]).filter(p => {
+      if (!(p.stop > winStart && p.start < winEnd)) return false;
+      if (!programMatchesCategory(p, category)) return false;
+      return true;
+    });
     if (!progs.length) return;
 
     const section = document.createElement('div'); section.className = 'mobile-channel';
@@ -173,11 +233,13 @@ function renderMobileFiltered(filteredChannels, q) {
       const isPast = p.stop < now;
       const dur = Math.round((p.stop - p.start) / 60000);
       const matchesProg =
-        p.title.toLowerCase().includes(q) ||
-        (p.desc && p.desc.toLowerCase().includes(q)) ||
-        (p.categories || []).some(cat => cat.toLowerCase().includes(q));
+        !!q && (
+          p.title.toLowerCase().includes(q) ||
+          (p.desc && p.desc.toLowerCase().includes(q)) ||
+          (p.categories || []).some(cat => cat.toLowerCase().includes(q))
+        );
       const item = document.createElement('div');
-      item.className = 'mobile-program' + (isLive ? ' is-live' : '') + (isPast ? ' is-past' : '') + (matchesProg ? ' search-match' : '');
+      item.className = 'mobile-program' + (isLive ? ' is-live' : '') + (isPast ? ' is-past' : '') + (matchesProg || (category && !channelMatchesQuery) ? ' search-match' : '');
 
       if (isLive) {
         const bar = document.createElement('div'); bar.className = 'mobile-program-progress';

src/js/utils.js

@@ -10,6 +10,7 @@ let channels = [];
 let programs = {};
 let m3uStreams = {}; // Normalized slug -> stream URL.
 let scrollListenerAdded = false; // Keeps the channel column vertically synced with the timeline.
+let availableCategories = [];
 
 function pad(n) { return String(n).padStart(2,'0'); }
 
@@ -123,6 +124,27 @@ function formatCategories(categories) {
   return Array.isArray(categories) && categories.length ? categories.join(' · ') : '';
 }
 
+function normalizeCategory(value) {
+  return String(value || '').trim().toLowerCase();
+}
+
+function collectAvailableCategories() {
+  const seen = new Set();
+  const list = [];
+  Object.values(programs).forEach(items => {
+    items.forEach(program => {
+      (program.categories || []).forEach(category => {
+        const label = String(category || '').trim();
+        const key = normalizeCategory(label);
+        if (!label || seen.has(key)) return;
+        seen.add(key);
+        list.push(label);
+      });
+    });
+  });
+  availableCategories = list.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
+}
+
 function parseAirDate(value) {
   if (!value) return null;
   const match = String(value).trim().match(/^(\d{4})/);
@@ -162,11 +184,22 @@ function parseAndRender(doc) {
   });
   Object.keys(programs).forEach(id => programs[id].sort((a,b) => a.start - b.start));
 
+  collectAvailableCategories();
+  if (typeof refreshCategoryFilterOptions === 'function') refreshCategoryFilterOptions();
   renderAll();
+  if (typeof refreshReminderSchedules === 'function') refreshReminderSchedules();
   startLiveUpdates();
 }
 
-function renderAll() {
+function renderUnfiltered() {
   if (isMobile()) { renderMobile(); }
   else { renderGrid(); setTimeout(centerNow, 150); }
 }
+
+function renderAll() {
+  if (typeof applyFilters === 'function') {
+    applyFilters();
+    return;
+  }
+  renderUnfiltered();
+}

src/tpl/footer.php

@@ -3,7 +3,7 @@
 <?php
 $js_dir = __DIR__ . '/../js/';
 include $js_dir . 'config.js';
-$js_modules = ['utils', 'favorites', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'search', 'program', 'updater', 'live'];
+$js_modules = ['utils', 'favorites', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'search', 'reminders', 'program', 'updater', 'live'];
 foreach ($js_modules as $mod) {
     echo file_get_contents($js_dir . $mod . '.js');
 }

src/tpl/modals.php

@@ -9,6 +9,18 @@
     <div class="pm-meta" id="pm-meta"></div>
     <div class="pm-genres" id="pm-genres"></div>
     <div class="pm-desc" id="pm-desc"></div>
+    <div class="pm-reminder-panel" id="pm-reminder-panel">
+      <button class="pm-btn pm-reminder" id="pm-reminder-toggle" type="button"><?= htmlspecialchars($L["reminder_button"] ?? 'Reminder') ?></button>
+      <div class="pm-reminder-submenu" id="pm-reminder-submenu">
+        <div class="pm-reminder-title"><?= htmlspecialchars($L["reminder_title"] ?? 'Notify me before this program starts') ?></div>
+        <div class="pm-reminder-text" id="pm-reminder-text"></div>
+        <div class="pm-reminder-status" id="pm-reminder-status"></div>
+        <div class="pm-reminder-actions">
+          <button class="pm-btn pm-reminder-save" id="pm-reminder-save" type="button"><?= htmlspecialchars($L["reminder_save"] ?? 'Activate reminder') ?></button>
+          <button class="pm-btn pm-reminder-remove" id="pm-reminder-remove" type="button"><?= htmlspecialchars($L["reminder_remove"] ?? 'Remove reminder') ?></button>
+        </div>
+      </div>
+    </div>
     <div class="pm-actions">
       <button class="pm-btn pm-watch" id="pm-watch">&#9654; <?= htmlspecialchars($L["watch_now"]) ?></button>
       <a class="pm-btn pm-imdb" id="pm-imdb" href="#" target="_blank" rel="noopener">&#127909; <?= htmlspecialchars($L["imdb_search"]) ?></a>

src/tpl/topbar.php

@@ -58,6 +58,9 @@ foreach ($theme_files as $file) {
 }
 ?>
   </select>
+  <select class="category-filter" id="categoryFilter" onchange="setCategoryFilter(this.value)" title="<?= htmlspecialchars($L["category_filter_title"] ?? 'Filter by category') ?>">
+    <option value=""><?= htmlspecialchars($L["category_all"] ?? 'All categories') ?></option>
+  </select>
   <button class="search-btn" onclick="toggleSearch()" title="Search">&#128269;</button>
   <div class="live-dot"><?= htmlspecialchars($L["live"]) ?></div>
 </div>