From 9ecf92d79a15b7ff01a454914fe20f3ba6bb5482 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Sat, 8 Aug 2026 14:21:28 +0200
Subject: [PATCH] use own card template (mm-card) + Template.add, like
 Shikimori plugin; fixes empty card (native card__img hidden)

---
 plugin.js | 44 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/plugin.js b/plugin.js
index 1b2ec31..c9d2ed0 100644
--- a/plugin.js
+++ b/plugin.js
@@ -42,21 +42,42 @@
         }
     }
 
-    // Inject plugin styles (only the grid layout; cards use native Lampa classes)
+    // Plugin templates/styles (pattern from Shikimori plugin):
+    // own namespaced classes so they do NOT collide with Lampa native .card__img
+    // (native card__img is hidden until its own lazy-load runs, so our <img> must use a custom class).
     function injectStyles() {
         if (window.__mymovies_css_injected) return;
         window.__mymovies_css_injected = true;
-        var css = '' +
+
+        // Card template with poster image
+        Lampa.Template.add('mymovies-card',
+            '<div class="mm-card selector">' +
+                '<div class="mm-card__view">' +
+                    '<img src="{img}" class="mm-card__img" loading="lazy" />' +
+                '</div>' +
+                '<div class="mm-card__title">{title}</div>' +
+                '<div class="mm-card__age">{year}</div>' +
+            '</div>');
+
+        // Styles
+        Lampa.Template.add('mymovies-style',
+            '<style>' +
             '.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}' +
+            '.mm-card{background:#1c1f26;border-radius:6px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s}' +
+            '.mm-card.focus,.mm-card.hover{transform:scale(1.05)}' +
+            '.mm-card__view{width:100%;aspect-ratio:2/3;overflow:hidden;background:#2a2e38}' +
+            '.mm-card__img{width:100%;height:100%;object-fit:cover;display:block}' +
+            '.mm-card__title{padding:.6em .7em .2em;font-size:1em;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}' +
+            '.mm-card__age{padding:0 .7em .6em;font-size:.85em;opacity:.6}' +
             '.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');
+            '.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}' +
+            '</style>');
     }
 
     // ---------- Component: movie list ----------
@@ -111,13 +132,14 @@
             return;
         }
         movies.forEach(function (m) {
-            // 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__age">').text(m.year));
+            // Use plugin card template (own classes, does not collide with native card__img)
+            var card = Lampa.Template.get('mymovies-card', {
+                img: resolve(m.poster || m.cover),
+                title: m.title || m.id,
+                year: m.year || ''
+            });
+            card = $(card);
+            card.attr('data-id', esc(m.id));
             card.on('hover:enter', function () { openMovie(m); });
             grid.append(card);
         });