Poprawki w wyszikiwaniu kanałów i wyświetlaniu

src/islands/jambox/JamboxChannelsModal.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
 import "../../styles/modal.css";
 import "../../styles/offers/offers-table.css";
-import "../../styles/channels-search.css"; // żeby input miał identyczny styl
+import "../../styles/channels-search.css";
 
 export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
   const [channels, setChannels] = useState([]);
@@ -18,9 +18,8 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
   const meta = useMemo(() => {
     if (loading) return "Ładowanie…";
     if (error) return error;
-    if (!query.trim()) return `Wyniki: ${filtered.length} / ${channels.length}`;
     return `Wyniki: ${filtered.length} / ${channels.length}`;
-  }, [loading, error, query, filtered.length, channels.length]);
+  }, [loading, error, filtered.length, channels.length]);
 
   useEffect(() => {
     if (!isOpen || !pkg?.id) return;
@@ -36,7 +35,6 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
       try {
         const params = new URLSearchParams({ packageId: String(pkg.id) });
         const res = await fetch(`/api/jambox/channels?${params.toString()}`);
-
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
         const json = await res.json();
@@ -81,7 +79,6 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
         <div class="max-w-8xl mx-auto px-3 md:px-6">
           <h2 class="f-modal-title">Kanały w pakiecie {pkg.name}</h2>
 
-          {/* INPUT jak w wyszukiwarce (z własnym X) */}
           <div class="f-chsearch__top">
             <div class="f-chsearch__inputwrap">
               <input
@@ -99,13 +96,14 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
                   class="f-chsearch__clear"
                   aria-label="Wyczyść wyszukiwanie"
                   onClick={() => setQuery("")}
-                  onMouseDown={(e) => e.preventDefault()} // nie zabieraj focusa inputowi
+                  onMouseDown={(e) => e.preventDefault()}
                 >
                   ✕
                 </button>
               )}
             </div>
 
+            {/* ✅ tu musi być __meta */}
             <div class="f-chsearch__meta">{meta}</div>
           </div>
 
@@ -117,19 +115,25 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
               {filtered.length === 0 ? (
                 <p>Brak kanałów spełniających kryteria.</p>
               ) : (
-                <div class="f-section-channel">
+                <div class="jmb-channels-grid">
                   {filtered.map((ch) => (
                     <div
                       class="jmb-channel-card"
                       key={ch.number}
+                      role="button"
+                      tabIndex={0}
                       onClick={(e) => {
-                        // żeby klik w link w opisie nie flipował
                         if (e.target.closest("a, button")) return;
                         e.currentTarget.classList.toggle("is-flipped");
                       }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          e.currentTarget.classList.toggle("is-flipped");
+                        }
+                      }}
                     >
                       <div class="jmb-channel-inner">
-                        {/* FRONT */}
                         <div class="jmb-channel-face jmb-channel-front">
                           {ch.logo_url && (
                             <img
@@ -143,7 +147,6 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
                           <div class="jmb-channel-number">kanał {ch.number}</div>
                         </div>
 
-                        {/* BACK */}
                         <div class="jmb-channel-face jmb-channel-back">
                           <div class="jmb-channel-back-title">{ch.name}</div>
                           <div

src/islands/jambox/JamboxChannelsSearch.jsx

@@ -13,7 +13,7 @@ export default function JamboxChannelsSearch() {
     const qq = q.trim();
     setErr("");
 
-    if (qq.length < 2) {
+    if (qq.length === 0) {
       setItems([]);
       setLoading(false);
       return;
@@ -58,7 +58,8 @@ export default function JamboxChannelsSearch() {
 
   const meta = useMemo(() => {
     const qq = q.trim();
-    if (qq.length < 2) return "Wpisz min. 2 znaki";
+     if (qq.length === 0) return "";
+    //  "Zacznij pisać, aby wyszukać"
     if (loading) return "Szukam…";
     if (err) return err;
     return `Znaleziono: ${items.length}`;
@@ -71,7 +72,7 @@ export default function JamboxChannelsSearch() {
     el.scrollIntoView({ behavior: "smooth", block: "start" });
 
     el.classList.add("is-target");
-    window.setTimeout(() => el.classList.remove("is-target"), 1200);
+    window.setTimeout(() => el.classList.remove("is-target"), 5400);
   }
 
   return (
@@ -101,7 +102,7 @@ export default function JamboxChannelsSearch() {
           )}
         </div>
 
-        <div class="f-chsearch__meta">{meta}</div>
+        <div class="f-chsearch-meta">{meta}</div>
       </div>
 
       <div class="f-chsearch__list" role="list">
@@ -138,16 +139,19 @@ export default function JamboxChannelsSearch() {
                 <div class="f-chsearch__packages">
                   Dostępny w:&nbsp;
                   {c.packages.map((p, i) => (
-                    <button
-                      type="button"
-                      class="f-chsearch__pkg"
-                      key={p.id}
-                      onClick={() => scrollToPackage(p.id)}
-                    >
-                      {p.name}{" "}
-                      <span class="f-chsearch__pkgnum">(kanał {p.number})</span>
+                    <span key={p.id}>
+                      <button
+                        type="button"
+                        class="f-chsearch__pkg"
+                        onClick={() => scrollToPackage(p.id)}
+                      >
+                        {p.name}
+                      </button>
+                      <span class="f-chsearch__pkgnum">
+                        {" "} (kanał {p.number})
+                      </span>
                       {i < c.packages.length - 1 ? ", " : ""}
-                    </button>
+                    </span>
                   ))}
                 </div>
               )}
@@ -156,7 +160,7 @@ export default function JamboxChannelsSearch() {
         ))}
 
         {q.trim().length >= 2 && !loading && items.length === 0 && (
-          <div class="f-chsearch__empty">
+          <div class="f-chsearch-empty">
             Brak wyników dla: <strong>{q}</strong>
           </div>
         )}