From ced0d67c87857bbbeeeac5adcfa4c3b1132b20e0 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Sat, 8 Aug 2026 13:32:28 +0200
Subject: [PATCH] use native Lampa card classes
 (card__img/card__title/card__age); fix framework contract
 create(body)+render() without double-render

---
 plugin.js | 75 ++++++++++++++++++++++++++-----------------------------
 1 file changed, 35 insertions(+), 40 deletions(-)

diff --git a/plugin.js b/plugin.js
index b91254a..8e1f1b6 100644
--- a/plugin.js
+++ b/plugin.js
@@ -42,21 +42,41 @@
         }
     }
 
+    // Inject plugin styles (only the grid layout; cards use native Lampa classes)
+    function injectStyles() {
+        if (window.__mymovies_css_injected) return;
+        window.__mymovies_css_injected = true;
+        var css = '' +
+            '.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
+            '.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
+            '.mymovies-detail{padding:3em;max-width:900px}' +
+            '.detail-head{display:flex;gap:2em;flex-wrap:wrap}' +
+            '.detail-poster{width:220px;border-radius:10px}' +
+            '.detail-info h1{margin:0 0 .4em;font-size:1.8em}' +
+            '.detail-info>div{margin:.3em 0;opacity:.85}' +
+            '.detail-actions{margin-top:1.5em}' +
+            '.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
+        $('<style>').text(css).appendTo('body');
+    }
+
     // ---------- Component: movie list ----------
+    // Framework contract (ActivitySlide.create):
+    //   component.create(body)   -> store the activity body
+    //   body.append(component.render(true)) -> render() returns a DOM node
     function MyMovies() {
         var comp = this;
+        var body;
 
-        this.create = function () {
-            return comp.render();
+        this.create = function (b) {
+            body = b;
         };
 
-        // Framework (ActivitySlide.start) calls component.start() after the
-        // activity is ready. Refresh the selector so focus lands on a card.
         this.start = function () {
             if (Lampa.Selector) Lampa.Selector.update();
         };
 
         this.render = function () {
+            injectStyles();
             var html = document.createElement('div');
             html.className = 'mymovies';
             var grid = document.createElement('div');
@@ -65,22 +85,17 @@
 
             if (comp.activity) comp.activity.loader(true);
 
-            injectStyles();
-
             loadCatalog(function (err, data) {
                 if (comp.activity) comp.activity.loader(false);
                 if (err) {
                     console.error('[mymovies] catalog error', err);
                     grid.innerHTML = '<div class="mymovies-empty">Catalog load error</div>';
-                    Lampa.Layer.update(html);
-                    Lampa.Layer.visible(html);
+                    if (Lampa.Selector) Lampa.Selector.update();
                     return;
                 }
                 var movies = (data && data.movies) || [];
                 console.log('[mymovies] loaded', movies.length, 'films');
                 renderMovies($(grid), movies);
-                Lampa.Layer.update(html);
-                Lampa.Layer.visible(html);
             });
 
             return html;
@@ -96,48 +111,29 @@
             return;
         }
         movies.forEach(function (m) {
-            var card = $('<div class="card selector movie-card" data-id="' + esc(m.id) + '">');
-            card.append($('<img class="card__poster">').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy'));
+            // LAMPA NATIVE card classes so the grid/style matches the app
+            var card = $('<div class="card selector" data-id="' + esc(m.id) + '">');
+            var view = $('<div class="card__view">');
+            view.append($('<img class="card__img">').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy'));
+            card.append(view);
             card.append($('<div class="card__title">').text(m.title || m.id));
-            if (m.year) card.append($('<div class="card__subtitle">').text(m.year));
+            if (m.year) card.append($('<div class="card__age">').text(m.year));
             card.on('hover:enter', function () { openMovie(m); });
             grid.append(card);
         });
         if (Lampa.Selector) Lampa.Selector.update();
     }
 
-    // Inject plugin styles so the grid looks like native Lampa movie cards
-    function injectStyles() {
-        if (window.__mymovies_css_injected) return;
-        window.__mymovies_css_injected = true;
-        var css = '' +
-            '.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
-            '.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
-            '.movie-card{background:#1c1f26;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s}' +
-            '.movie-card .card__poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#2a2e38}' +
-            '.movie-card .card__title{padding:.6em .7em .2em;font-size:1em;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}' +
-            '.movie-card .card__subtitle{padding:0 .7em .6em;font-size:.85em;opacity:.6}' +
-            '.movie-card.focus,.movie-card.hover{transform:scale(1.05)}' +
-            '.mymovies-detail{padding:3em;max-width:900px}' +
-            '.detail-head{display:flex;gap:2em}' +
-            '.detail-poster{width:220px;border-radius:10px}' +
-            '.detail-info h1{margin:0 0 .4em;font-size:1.8em}' +
-            '.detail-info>div{margin:.3em 0;opacity:.85}' +
-            '.detail-actions{margin-top:1.5em}' +
-            '.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
-        $('<style>').text(css).appendTo('body');
-    }
-
     // ---------- Component: movie detail ----------
     var selected = null;
     function MyMoviesDetail() {
         var comp = this;
+        var body;
 
-        this.create = function () {
-            return comp.render();
+        this.create = function (b) {
+            body = b;
         };
 
-        // Framework (ActivitySlide.start) calls component.start().
         this.start = function () {
             if (Lampa.Selector) Lampa.Selector.update();
         };
@@ -146,6 +142,7 @@
             var m = selected;
             if (!m) { Lampa.Activity.back(); return document.createElement('div'); }
 
+            injectStyles();
             var html = document.createElement('div');
             html.className = 'mymovies-detail';
             var head = document.createElement('div');
@@ -176,8 +173,6 @@
             html.appendChild(actions);
 
             $(btn).on('hover:enter', function () { play(m); });
-            Lampa.Layer.update(html);
-            Lampa.Layer.visible(html);
             return html;
         };
     }