Iskalnik v 'moji reels' (artist+title+filename, debounced 150ms)

templates/index.html

@@ -411,10 +411,13 @@
     <section class="card">
       <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px;">
         <h2 style="margin:0;">moji reels</h2>
-        <label style="display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer;">
+        <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
-          <input type="checkbox" id="show-uploaded">
+          <input type="text" id="jobs-search" placeholder="🔍 išči (izvajalec, naslov, file)…" style="width:240px; padding:5px 9px; font-size:13px;" autocomplete="off">
-          ☁ Pokaži tudi že naložene
+          <label style="display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer;">
-        </label>
+            <input type="checkbox" id="show-uploaded">
+            ☁ Pokaži tudi že naložene
+          </label>
+        </div>
       </div>
       <div class="jobs-list" id="jobs-list">
         <div class="empty">Še ni obdelav</div>
@@ -980,18 +983,39 @@
     }
 
     // ─── Jobs list ──────────────────────────────────
+    function jobMatchesSearch(job, query) {
+      if (!query) return true;
+      const q = query.toLowerCase().trim();
+      if (!q) return true;
+      const haystack = [
+        job.parsed_artist || "",
+        job.parsed_title || "",
+        job.filename || "",
+        job.id || "",
+        job.tv_station || "",
+      ].join(" ").toLowerCase();
+      // vsaka beseda iz query-ja mora biti v haystacku (AND match)
+      return q.split(/\s+/).every(w => haystack.includes(w));
+    }
+
     async function refreshJobs() {
       const r = await fetch("/api/jobs");
       if (!r.ok) return;
       const data = await r.json();
       const list = $("#jobs-list");
       const showUploaded = $("#show-uploaded") && $("#show-uploaded").checked;
-      // Filtriraj ven jobe ki so že naloženi in skriti — RAZEN če checkbox vklopljen
+      const searchQuery = ($("#jobs-search") && $("#jobs-search").value) || "";
-      const visible = data.jobs.filter(j => showUploaded || !j.hidden_after_upload);
+      // Filtriraj: če iskanje aktivno → ignore hidden_after_upload (iskanje vidi vse)
+      const visible = data.jobs.filter(j => {
+        if (searchQuery.trim()) return jobMatchesSearch(j, searchQuery);
+        return showUploaded || !j.hidden_after_upload;
+      });
       if (!visible.length) {
-        list.innerHTML = showUploaded
+        list.innerHTML = searchQuery.trim()
-          ? '<div class="empty">Še ni obdelav</div>'
+          ? `<div class="empty">Ni zadetkov za "${escapeHtml(searchQuery)}"</div>`
-          : '<div class="empty">Vse obdelano in naloženo. Klikni "Pokaži tudi že naložene" če želiš popraviti.</div>';
+          : (showUploaded
+            ? '<div class="empty">Še ni obdelav</div>'
+            : '<div class="empty">Vse obdelano in naloženo. Klikni "Pokaži tudi že naložene" če želiš popraviti.</div>');
         return;
       }
       list.innerHTML = "";
@@ -1004,10 +1028,18 @@
       });
     }
     
-    // Toggle pokaži/skrij že naložene
+    // Toggle pokaži/skrij že naložene + iskalnik
     document.addEventListener("DOMContentLoaded", () => {
       const toggle = $("#show-uploaded");
       if (toggle) toggle.addEventListener("change", refreshJobs);
+      const search = $("#jobs-search");
+      if (search) {
+        let searchTimer = null;
+        search.addEventListener("input", () => {
+          clearTimeout(searchTimer);
+          searchTimer = setTimeout(refreshJobs, 150);
+        });
+      }
     });
 
     function updateJobInList(job) {