custom_components/bahmcloud_store/panel/panel.js aktualisiert

custom_components/bahmcloud_store/panel/panel.js

@@ -10,9 +10,6 @@ class BahmcloudStorePanel extends HTMLElement {
     this._loading = true;
     this._error = null;
 
-    this._customAddUrl = "";
-    this._customAddName = "";
-
     this._search = "";
     this._category = "all";
 
@@ -60,10 +57,7 @@ class BahmcloudStorePanel extends HTMLElement {
     if (this._isDesktop()) return;
     try {
       this.dispatchEvent(new Event("hass-toggle-menu", { bubbles: true, composed: true }));
-      return;
     } catch (_) {}
-    this._error = "Unable to open the sidebar on this client. Use the back button.";
-    this._update();
   }
 
   _goBack() {
@@ -108,7 +102,10 @@ class BahmcloudStorePanel extends HTMLElement {
     this._update();
 
     try {
-      const resp = await this._hass.callApi("get", `bcs/readme?repo_id=${encodeURIComponent(repoId)}`);
+      const resp = await this._hass.callApi(
+        "get",
+        `bcs/readme?repo_id=${encodeURIComponent(repoId)}`
+      );
 
       if (resp?.ok && typeof resp.readme === "string" && resp.readme.trim()) {
         this._readmeText = resp.readme;
@@ -164,38 +161,13 @@ class BahmcloudStorePanel extends HTMLElement {
           color:var(--primary-text-color);
         }
 
-        .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
-        .tab{
-          border:1px solid var(--divider-color);
-          background:var(--card-background-color);
-          color:var(--primary-text-color);
-          padding:8px 12px; border-radius:999px;
-          cursor:pointer; font-weight:700; font-size:13px;
-        }
-        .tab.active{
-          border-color:var(--bcs-accent);
-          box-shadow:0 0 0 2px color-mix(in srgb, var(--bcs-accent) 20%, transparent);
-        }
-
-        button{
-          padding:9px 12px; border-radius:12px;
-          border:1px solid var(--divider-color);
-          background:var(--card-background-color);
-          color:var(--primary-text-color);
-          cursor:pointer; font-weight:800;
-        }
-        button.primary{
-          border-color:var(--bcs-accent);
-          background: color-mix(in srgb, var(--bcs-accent) 16%, var(--card-background-color));
-        }
-
         .card{
           border:1px solid var(--divider-color);
           background:var(--card-background-color);
           border-radius:16px; padding:12px; margin:10px 0;
         }
-
         .card.clickable{ cursor:pointer; }
+
         .row{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
         .muted{ color:var(--secondary-text-color); font-size:13px; margin-top:4px; }
         .small{ font-size:12px; }
@@ -207,18 +179,7 @@ class BahmcloudStorePanel extends HTMLElement {
         }
         .badge.custom{ border-color:var(--bcs-accent); color:var(--bcs-accent); }
 
-        .error{ color:#b00020; white-space:pre-wrap; margin-top:10px; }
+        .filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
-
-        .grid2{ display:grid; grid-template-columns: 1fr; gap: 12px; }
-        @media (min-width: 900px){ .grid2{ grid-template-columns: 1.2fr 0.8fr; } }
-
-        .filters{
-          display:flex;
-          gap: 10px;
-          flex-wrap: wrap;
-          align-items: center;
-          margin-bottom: 12px;
-        }
 
         input, select{
           padding:10px 12px; border-radius:12px;
@@ -235,23 +196,8 @@ class BahmcloudStorePanel extends HTMLElement {
         a{ color:var(--bcs-accent); text-decoration:none; }
         a:hover{ text-decoration:underline; }
 
-        pre.readme{
+        /* Pretty markdown styling for server-rendered HTML */
-          white-space: pre-wrap;
+        .md { line-height: 1.65; font-size: 14px; }
-          word-break: break-word;
-          margin: 0;
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-          font-size: 12.5px;
-          line-height: 1.5;
-        }
-
-        details{ margin-top: 10px; }
-        summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 800; }
-
-        /* Pretty markdown styling */
-        .md{
-          line-height: 1.6;
-          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); }
@@ -268,15 +214,18 @@ class BahmcloudStorePanel extends HTMLElement {
           background: color-mix(in srgb, var(--bcs-accent) 8%, var(--card-background-color));
           border-radius: 12px;
         }
-        .md table{
+
-          width:100%;
+        pre.readme{
-          border-collapse: collapse;
+          white-space: pre-wrap;
-        }
+          word-break: break-word;
-        .md th,.md td{
+          margin: 0;
-          border: 1px solid var(--divider-color);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-          padding: 8px;
+          font-size: 12.5px;
-          text-align: left;
+          line-height: 1.5;
         }
+
+        details{ margin-top: 10px; }
+        summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 800; }
       </style>
 
       <div class="mobilebar">
@@ -294,14 +243,8 @@ class BahmcloudStorePanel extends HTMLElement {
       </div>
 
       <div class="wrap">
-        <div class="tabs" id="tabs">
-          <div class="tab" data-view="store">Store</div>
-          <div class="tab" data-view="manage">Manage repositories</div>
-          <div class="tab" data-view="about">Settings / About</div>
-        </div>
-
         <div id="content"></div>
-        <div id="error" class="error"></div>
+        <div id="error" style="color:#b00020; white-space:pre-wrap; margin-top:10px;"></div>
       </div>
     `;
 
@@ -309,13 +252,6 @@ class BahmcloudStorePanel extends HTMLElement {
     root.getElementById("menuBtn").addEventListener("click", () => this._toggleMenu());
     root.getElementById("backBtn").addEventListener("click", () => this._goBack());
 
-    for (const tab of root.querySelectorAll(".tab")) {
-      tab.addEventListener("click", () => {
-        this._view = tab.getAttribute("data-view");
-        this._update();
-      });
-    }
-
     // Prevent HA global shortcuts while typing inside panel inputs
     const stopIfFormField = (e) => {
       const t = e.composedPath ? e.composedPath()[0] : e.target;
@@ -330,87 +266,34 @@ class BahmcloudStorePanel extends HTMLElement {
     root.addEventListener("keypress", stopIfFormField, true);
   }
 
-  _captureFocusState() {
-    const root = this.shadowRoot;
-    const ae = root.activeElement;
-    if (!ae || !ae.id) return null;
-
-    const supported = new Set(["searchInput", "categorySelect"]);
-    if (!supported.has(ae.id)) return null;
-
-    return {
-      id: ae.id,
-      value: ae.value,
-      selectionStart: typeof ae.selectionStart === "number" ? ae.selectionStart : null,
-      selectionEnd: typeof ae.selectionEnd === "number" ? ae.selectionEnd : null,
-    };
-  }
-
-  _restoreFocusState(state) {
-    if (!state) return;
-    const root = this.shadowRoot;
-    const el = root.getElementById(state.id);
-    if (!el) return;
-
-    try {
-      el.focus({ preventScroll: true });
-      if (state.selectionStart !== null && state.selectionEnd !== null && typeof el.setSelectionRange === "function") {
-        el.setSelectionRange(state.selectionStart, state.selectionEnd);
-      }
-    } catch (_) {}
-  }
-
   _update() {
     const root = this.shadowRoot;
-    const focusState = this._captureFocusState();
-
     const content = root.getElementById("content");
     const err = root.getElementById("error");
     const subtitle = root.getElementById("subtitle");
 
     const v = this._data?.version ? String(this._data.version) : null;
     subtitle.textContent = v ? `BCS ${v}` : "BCS — loading…";
-
-    for (const tab of root.querySelectorAll(".tab")) {
-      tab.classList.toggle("active", tab.getAttribute("data-view") === this._view);
-    }
-
     err.textContent = this._error ? `Error: ${this._error}` : "";
 
     if (this._loading) {
       content.innerHTML = `<div class="card">Loading…</div>`;
-      this._restoreFocusState(focusState);
       return;
     }
 
     if (!this._data) {
       content.innerHTML = `<div class="card">No data.</div>`;
-      this._restoreFocusState(focusState);
       return;
     }
 
-    if (this._view === "store") {
+    if (this._view === "detail") {
-      content.innerHTML = this._renderStore();
+      content.innerHTML = this._renderDetail();
-      this._wireStore();
+      this._wireDetail();
-      this._restoreFocusState(focusState);
       return;
     }
 
-    if (this._view === "manage") {
+    content.innerHTML = this._renderStore();
-      content.innerHTML = `<div class="card">Manage view is unchanged in this patch.</div>`;
+    this._wireStore();
-      this._restoreFocusState(focusState);
-      return;
-    }
-
-    if (this._view === "about") {
-      content.innerHTML = this._renderAbout();
-      this._restoreFocusState(focusState);
-      return;
-    }
-
-    content.innerHTML = this._renderDetail();
-    this._wireDetail();
-    this._restoreFocusState(focusState);
   }
 
   _renderStore() {
@@ -442,9 +325,6 @@ class BahmcloudStorePanel extends HTMLElement {
       const desc = r.description || "No description available.";
       const creator = r.owner ? `Creator: ${r.owner}` : "Creator: -";
       const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
-      const metaSrc = r.meta_source ? `Meta: ${r.meta_source}` : null;
-
-      const lineBits = [creator, latest, metaSrc].filter(Boolean);
 
       return `
         <div class="card clickable" data-repo="${this._esc(r.id)}">
@@ -452,7 +332,7 @@ class BahmcloudStorePanel extends HTMLElement {
             <div>
               <div><strong>${this._esc(r.name)}</strong></div>
               <div class="muted">${this._esc(desc)}</div>
-              <div class="muted small">${this._esc(lineBits.join(" · "))}</div>
+              <div class="muted small">${this._esc(`${creator} · ${latest}`)}</div>
             </div>
             ${badge}
           </div>
@@ -480,7 +360,6 @@ class BahmcloudStorePanel extends HTMLElement {
         this._update();
       });
     }
-
     if (cat) {
       cat.addEventListener("change", (e) => {
         this._category = String(e.target.value || "all");
@@ -500,19 +379,7 @@ class BahmcloudStorePanel extends HTMLElement {
     const r = this._detailRepo;
     if (!r) return `<div class="card">Repository not found.</div>`;
 
-    const badge = r.source === "custom"
-      ? `<span class="badge custom">Custom</span>`
-      : `<span class="badge">Index</span>`;
-
     const desc = r.description || "No description available.";
-    const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
-
-    const infoBits = [
-      r.owner ? `Creator: ${r.owner}` : "Creator: -",
-      latest,
-      r.provider ? `Provider: ${r.provider}` : null,
-      r.meta_source ? `Meta: ${r.meta_source}` : null,
-    ].filter(Boolean);
 
     const readmeBlock = this._readmeLoading
       ? `<div class="card">Loading README…</div>`
@@ -538,32 +405,19 @@ class BahmcloudStorePanel extends HTMLElement {
         `;
 
     return `
-      <div class="grid2">
+      <div class="card">
-        <div>
+        <div class="row">
-          <div class="card">
+          <div>
-            <div class="row">
+            <div><strong style="font-size:16px;">${this._esc(r.name)}</strong></div>
-              <div>
+            <div class="muted">${this._esc(desc)}</div>
-                <div><strong style="font-size:16px;">${this._esc(r.name)}</strong></div>
+            <div class="muted small" style="margin-top:8px;">
-                <div class="muted">${this._esc(desc)}</div>
+              <a href="${this._esc(r.url)}" target="_blank" rel="noreferrer">Open repository</a>
-                <div class="muted small" style="margin-top:8px;">${this._esc(infoBits.join(" · "))}</div>
-                <div class="muted small" style="margin-top:8px;">
-                  <a href="${this._esc(r.url)}" target="_blank" rel="noreferrer">Open repository</a>
-                </div>
-              </div>
-              ${badge}
             </div>
           </div>
-
+          <span class="badge">${this._esc(r.source === "custom" ? "Custom" : "Index")}</span>
-          ${readmeBlock}
-        </div>
-
-        <div>
-          <div class="card">
-            <div><strong>Installation & Updates</strong></div>
-            <div class="muted">Buttons will be enabled in a later version.</div>
-          </div>
         </div>
       </div>
+      ${readmeBlock}
     `;
   }
 
@@ -573,22 +427,14 @@ class BahmcloudStorePanel extends HTMLElement {
     if (!pretty) return;
 
     if (this._readmeHtml) {
+      // ✅ pretty HTML from backend
       pretty.innerHTML = this._readmeHtml;
     } else if (this._readmeText) {
-      // If backend could not render HTML, show a friendly fallback text
+      // fallback: no renderer available in backend
-      pretty.innerHTML = `<div class="muted">Markdown rendering is not available. Please use "Show raw Markdown".</div>`;
+      pretty.innerHTML = `<div class="muted">Markdown rendering is not available on this system. Use “Show raw Markdown”.</div>`;
     }
   }
 
-  _renderAbout() {
-    return `
-      <div class="card">
-        <div><strong>Settings / About</strong></div>
-        <div class="muted">BCS version: ${this._esc(this._data.version || "-")}</div>
-      </div>
-    `;
-  }
-
   _esc(s) {
     return String(s ?? "")
       .replaceAll("&", "&amp;")