Readme Show more.

custom_components/bahmcloud_store/panel/panel.js

@@ -19,12 +19,15 @@ class BahmcloudStorePanel extends HTMLElement {
 
     this._detailRepoId = null;
     this._detailRepo = null;
-
     this._readmeLoading = false;
     this._readmeText = null;
     this._readmeHtml = null;
     this._readmeError = null;
 
+    // README UX (E2)
+    this._readmeExpanded = false;
+    this._readmeCanToggle = false;
+
     this._refreshing = false;
 
     this._installingRepoId = null;
@@ -201,6 +204,7 @@ class BahmcloudStorePanel extends HTMLElement {
       this._readmeText = null;
       this._readmeHtml = null;
       this._readmeError = null;
+      this._readmeExpanded = false;
       this._update();
       return;
     }
@@ -265,6 +269,8 @@ class BahmcloudStorePanel extends HTMLElement {
     this._readmeText = null;
     this._readmeHtml = null;
     this._readmeError = null;
+    this._readmeExpanded = false;
+    this._readmeCanToggle = false;
 
     this._update();
     this._loadReadme(repoId);
@@ -282,15 +288,23 @@ class BahmcloudStorePanel extends HTMLElement {
       if (resp?.ok && typeof resp.readme === "string" && resp.readme.trim()) {
         this._readmeText = resp.readme;
         this._readmeHtml = typeof resp.html === "string" && resp.html.trim() ? resp.html : null;
+
+        const lines = resp.readme.split(/\r?\n/).length;
+        this._readmeCanToggle = lines > 24 || resp.readme.length > 1600;
+        this._readmeExpanded = !this._readmeCanToggle;
       } else {
         this._readmeText = null;
         this._readmeHtml = null;
         this._readmeError = this._safeText(resp?.message) || "README not found.";
+        this._readmeCanToggle = false;
+        this._readmeExpanded = false;
       }
     } catch (e) {
       this._readmeText = null;
       this._readmeHtml = null;
       this._readmeError = e?.message ? String(e.message) : String(e);
+      this._readmeCanToggle = false;
+      this._readmeExpanded = false;
     } finally {
       this._readmeLoading = false;
       this._update();
@@ -442,6 +456,50 @@ class BahmcloudStorePanel extends HTMLElement {
           display:block;
           max-width:100%;
         }
+        .readmeWrap{
+          margin-top:12px;
+          max-width:100%;
+          border:1px solid var(--divider-color);
+          border-radius:14px;
+          padding:12px;
+          background: rgba(0,0,0,.02);
+          position:relative;
+          overflow:hidden;
+        }
+        .readmeWrap.collapsed{
+          max-height:260px;
+        }
+        @media (min-width: 1024px){
+          .readmeWrap.collapsed{ max-height:340px; }
+        }
+        .readmeWrap.collapsed::after{
+          content:"";
+          position:absolute;
+          left:0; right:0; bottom:0;
+          height:64px;
+          background: linear-gradient(to bottom, rgba(0,0,0,0), var(--card-background-color));
+          pointer-events:none;
+        }
+        .readmeWrap.expanded{
+          max-height:70vh;
+          overflow:auto;
+          -webkit-overflow-scrolling:touch;
+        }
+        .readmeActions{
+          display:flex; justify-content:flex-end;
+          margin-top:10px;
+        }
+        button.link{
+          border:1px solid transparent;
+          background: transparent;
+          color: var(--bcs-accent);
+          padding:8px 10px;
+        }
+        button.link:hover{
+          border-color: rgba(30,136,229,.25);
+          background: rgba(30,136,229,.06);
+        }
+
         .md th, .md td{
           border: 1px solid var(--divider-color);
           padding: 8px;
@@ -450,6 +508,7 @@ class BahmcloudStorePanel extends HTMLElement {
           overflow-wrap:anywhere;
           word-break:break-word;
         }
+
       </style>
 
       <div class="mobilebar">
@@ -735,7 +794,14 @@ class BahmcloudStorePanel extends HTMLElement {
             <div class="muted small">Rendered Markdown</div>
           </div>
 
-          <div id="readmePretty" class="md" style="margin-top:12px;"></div>
+          <div class="readmeWrap ${this._readmeExpanded ? "expanded" : "collapsed"}">
+            <div id="readmePretty" class="md"></div>
+          </div>
+          ${this._readmeCanToggle ? `
+          <div class="readmeActions">
+            <button class="link" id="btnReadmeToggle">${this._readmeExpanded ? "Show less" : "Show more"}</button>
+          </div>
+          ` : ``}
 
           <details>
             <summary>Show raw Markdown</summary>
@@ -838,6 +904,7 @@ class BahmcloudStorePanel extends HTMLElement {
     const btnUpdate = root.getElementById("btnUpdate");
     const btnUninstall = root.getElementById("btnUninstall");
     const btnRestart = root.getElementById("btnRestart");
+    const btnReadmeToggle = root.getElementById("btnReadmeToggle");
 
     if (btnInstall) {
       btnInstall.addEventListener("click", () => {
@@ -864,6 +931,13 @@ class BahmcloudStorePanel extends HTMLElement {
       btnRestart.addEventListener("click", () => this._restartHA());
     }
 
+    if (btnReadmeToggle) {
+      btnReadmeToggle.addEventListener("click", () => {
+        this._readmeExpanded = !this._readmeExpanded;
+        this._update();
+      });
+    }
+
     const mount = root.getElementById("readmePretty");
     if (!mount) return;