add collapse button for stages page

main.js

@@ -735,6 +735,16 @@
     elList.forEach(el => el.classList.remove("hidden"))
   }
 
+  function toggleRows(rows, from, to, cycle, showIndex) {
+    for (let i = from; i < to; i = i + cycle) {
+      for (let j = 0; j < cycle; j++) {
+        if (!showIndex.includes(j)) {
+          rows[i + j]?.classList.toggle("collapsed")
+        }
+      }
+    }
+  }
+
   function makeSwiper(dialog, fileListContainer, src) {
     let files = [...fileListContainer.querySelectorAll(`:is(.preview, .preview-small)`)]
 
@@ -1478,9 +1488,16 @@
     document.querySelector(`#content table table tr:nth-child(2) `).remove()
   }
 
+  function toggleStagePageRows(rows) {
+    let showIndex = [0, 3]
+    let to = rows.findIndex(el => el.querySelector("th")?.textContent.trim() == "Бонусы")
+    toggleRows(rows, 3, to, 8, showIndex)
+    toggleRows(rows, to, rows.length, 1, [])
+}
+
   function prettifyRouteStagesPage() {
     let styles = `
-      #content > table tr:nth-child(n + 5):not(:nth-child(7)) {
+      tr.collapsed {
         display: block;
         width: 0;
         height: 0;
@@ -1488,6 +1505,19 @@
       }
     `
 
+    let rows = [...document.querySelectorAll(`#content tbody tr`)]
+    let collapseButton = document.createElement("button")
+    collapseButton.type = "button"
+    collapseButton.textContent = "Показать"
+    toggleStagePageRows(rows)
+
+    collapseButton.addEventListener("click", () => {
+      toggleStagePageRows(rows)
+      collapseButton.textContent = "Скрыть"
+    })
+
+    document.querySelector(`table tr:first-child th`).append(collapseButton)
+
     addStylesToHead(styles)
   }