From 236099e562afc38760b7cf0831cd38673191c0b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Bachmann?= <r.bachmann@bahmcloud.de>
Date: Thu, 15 Jan 2026 11:24:44 +0000
Subject: [PATCH] custom_components/bahmcloud_store/panel/panel.js aktualisiert

---
 .../bahmcloud_store/panel/panel.js            | 69 +++++++++++--------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/custom_components/bahmcloud_store/panel/panel.js b/custom_components/bahmcloud_store/panel/panel.js
index b1a1a27..0b4feb8 100644
--- a/custom_components/bahmcloud_store/panel/panel.js
+++ b/custom_components/bahmcloud_store/panel/panel.js
@@ -21,10 +21,8 @@ class BahmcloudStorePanel extends HTMLElement {
 
     this._readmeLoading = false;
     this._readmeText = null;
-    this._readmeHtml = null;
+    this._readmeHtml = null; // backend may provide; we don't rely on it anymore
     this._readmeError = null;
-
-    this._mdMountToken = 0;
   }
 
   set hass(hass) {
@@ -333,26 +331,10 @@ class BahmcloudStorePanel extends HTMLElement {
         details{ margin-top: 10px; }
         summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 900; }
 
-        /* Pretty markdown (server rendered HTML) */
+        /* Pretty Markdown container spacing (ha-markdown renders inside) */
         .md { line-height: 1.65; font-size: 14px; }
-        .md h1,.md h2,.md h3{ margin: 18px 0 10px; }
-        .md p{ margin: 10px 0; }
-        .md code{ padding: 2px 6px; border-radius: 8px; border: 1px solid var(--divider-color); }
-        .md pre{
-          padding: 12px;
-          border-radius: 14px;
-          border: 1px solid var(--divider-color);
-          overflow: auto;
-        }
-        .md blockquote{
-          margin: 10px 0;
-          padding: 8px 12px;
-          border-left: 4px solid var(--bcs-accent);
-          background: color-mix(in srgb, var(--bcs-accent) 8%, var(--card-background-color));
-          border-radius: 12px;
-        }
-        .md table{ width:100%; border-collapse: collapse; }
-        .md th,.md td{ border: 1px solid var(--divider-color); padding: 8px; text-align: left; }
+        .md :is(h1,h2,h3){ margin: 18px 0 10px; }
+        .md :is(p,ul,ol,pre,blockquote,table){ margin: 10px 0; }
       </style>
 
       <div class="mobilebar">
@@ -621,7 +603,7 @@ class BahmcloudStorePanel extends HTMLElement {
         <div class="card">
           <div class="row" style="align-items:center;">
             <div><strong>README</strong></div>
-            <div class="muted small">${this._readmeHtml ? "Rendered Markdown" : "Raw Markdown (renderer unavailable)"}</div>
+            <div class="muted small">Rendered Markdown</div>
           </div>
 
           <div id="readmePretty" class="md" style="margin-top:12px;"></div>
@@ -679,14 +661,43 @@ class BahmcloudStorePanel extends HTMLElement {
 
   _wireDetail() {
     const root = this.shadowRoot;
-    const pretty = root.getElementById("readmePretty");
-    if (!pretty) return;
+    const mount = root.getElementById("readmePretty");
+    if (!mount) return;
 
-    if (this._readmeHtml) {
-      pretty.innerHTML = this._readmeHtml;
-    } else if (this._readmeText) {
-      pretty.innerHTML = `<div class="muted">Markdown rendering is not available on this system. Use “Show raw Markdown”.</div>`;
+    // Always prefer HA's frontend markdown renderer to get a professional look.
+    // This uses the same renderer concept as HA's Markdown card (Marked.js). :contentReference[oaicite:1]{index=1}
+    if (this._readmeText) {
+      try {
+        mount.innerHTML = "";
+
+        const el = document.createElement("ha-markdown");
+        // Ensure it has access to HA context (themes, link handling, etc.)
+        el.hass = this._hass;
+
+        // Different HA versions use either "content" or "markdown" internally;
+        // setting both is harmless and maximizes compatibility.
+        el.content = this._readmeText;
+        el.markdown = this._readmeText;
+
+        // Some versions support these flags; safe to set even if ignored.
+        el.allowHtml = false;
+        el.breaks = true;
+
+        mount.appendChild(el);
+        return;
+      } catch (_) {
+        // fall through to html/raw fallback
+      }
     }
+
+    // Fallback: if backend provided sanitized HTML, use it
+    if (this._readmeHtml) {
+      mount.innerHTML = this._readmeHtml;
+      return;
+    }
+
+    // Last resort: show nothing here (raw is still available via details)
+    mount.innerHTML = `<div class="muted">Unable to render Markdown on this client.</div>`;
   }
 
   _renderFabs() {