catalog: revert Lampa.Scroll wrapper; plain overflow grid + Navigator nav + scrollFocused

plugin.js

@@ -62,8 +62,7 @@
         // styles (.card / .full-start-new / .full-descr / .full-start__button).
         var css =
             '.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
-            // Cards live inside the native Lampa.Scroll content wrapper.
-            '.mymovies .scroll__content{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
+            '.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
             '.mymovies-detail{padding:2em 3em;box-sizing:border-box}' +
             '.mymovies-detail .full-start-new__img{opacity:1 !important}' +
             // Follow Lampa "simplified interface" (light--version): square corners like catalog cards
@@ -76,23 +75,16 @@
     }
 
     // ---------- Component: movie list ----------
-    // Uses Lampa.Scroll (native catalog scroller) so arrow navigation + smooth
-    // scroll-up behave exactly like built-in Lampa catalogs.
+    // Native Lampa cards + native navigation (Controller/Navigator). Scrolling uses
+    // the standard overflow container so cards stay in view (Lampa.Scroll was dropped
+    // because it hijacks scrollTop and needs internal Item classes we don't replicate).
     function MyMovies() {
         var comp = this;
         var body;
-        var scroll;
+        var grid;
 
         this.create = function (b) {
             body = b;
-            // Native Lampa scroller (same options as category_full / items).
-            scroll = new Lampa.Scroll({
-                mask: true,
-                over: true,
-                scroll_by_item: true,
-                end_ratio: 2
-            });
-            // Back button (Escape / remote) handled natively via keydown -> Activity.backward.
             comp._onKey = function (e) {
                 if (e.key === 'Backspace' || e.key === 'Escape') {
                     e.preventDefault();
@@ -105,15 +97,15 @@
 
         this.destroy = function () {
             if (comp._onKey) document.removeEventListener('keydown', comp._onKey, true);
-            if (scroll && scroll.destroy) scroll.destroy();
         };
 
         this.render = function () {
             injectStyles();
             var html = document.createElement('div');
             html.className = 'mymovies';
-            // Scroll provides its own body (.scroll__body / .scroll__content).
-            html.appendChild(scroll.render(true));
+            grid = document.createElement('div');
+            grid.className = 'movies-grid';
+            html.appendChild(grid);
 
             if (comp.activity) comp.activity.loader(true);
 
@@ -121,7 +113,7 @@
                 if (comp.activity) comp.activity.loader(false);
                 if (err) {
                     console.error('[mymovies] catalog error', err);
-                    scroll.append($('<div class="mymovies-empty">Catalog load error</div>'));
+                    grid.innerHTML = '<div class="mymovies-empty">Catalog load error</div>';
                     return;
                 }
                 var movies = (data && data.movies) || [];
@@ -130,14 +122,16 @@
                 window.__mymovies_catalog = movies;
                 console.log('[mymovies] loaded', movies.length, 'films');
                 renderMovies(movies);
+                // Focus the first card once it exists (start() may have run before load).
+                Lampa.Controller.toggle('content');
             });
 
             return html;
         };
 
-        // Required by ActivitySlide contract. Scroll (created in create()) owns the
-        // auto-scroll; we register a Controller that drives Navigator over the cards.
-        // Focus is set on the first card only once (no reset on re-toggle).
+        // Required by ActivitySlide contract: wire remote/keyboard navigation.
+        // Cards are native .selector elements; Navigator moves focus, we scroll the
+        // container so the focused card stays visible (native Lampa behaviour).
         this.start = function () {
             var started = false;
             Lampa.Controller.add('content', {
@@ -168,8 +162,13 @@
             Lampa.Controller.toggle('content');
         };
 
-        // Build each card and append through the native Scroll (handles focus + scroll).
+        // Build each card and append to the grid.
         function renderMovies(movies) {
+            grid.empty();
+            if (!movies.length) {
+                grid.append('<div class="mymovies-empty">Catalog is empty</div>');
+                return;
+            }
             movies.forEach(function (m) {
                 var card = $(
                     '<div class="card selector card--loaded" data-id="' + esc(m.id) + '">' +
@@ -181,11 +180,8 @@
                         (m.year ? '<div class="card__age">' + esc(String(m.year)) + '</div>' : '') +
                     '</div>');
                 card.on('hover:enter', function () { openMovie(m); });
-                scroll.append(card);
+                grid.append(card);
             });
-            // Catalog finished loading after start() ran (async). Re-toggle so the
-            // navigation Controller picks up the now-present cards and sets focus.
-            Lampa.Controller.toggle('content');
         }
     }
     Lampa.Component.add(PLUGIN.name, MyMovies);