collapse tx groups with details/summary html tags

Author: aorith

assets/css/02_main.css

@@ -136,6 +136,13 @@ pre {
   vertical-align: top;
 }
 
+.view details summary {
+  font-weight: bold;
+  font-size: var(--fsize-xl);
+  color: var(--calm);
+  margin: 0.5rem 0 0.5rem 0;
+}
+
 /* HTMX animation after element creation */
 .fade-me-in.htmx-added {
   opacity: 0;

assets/templates/views/headers_view.html

@@ -38,13 +38,17 @@ <h1>Headers</h1>
 		<br>
 
 		{{ $set := .Transactions.Set }}
+		{{ $state := "open" }}
 		{{ range .Transactions.Set.UniqueRootParents false }}
-		<h2>{{ .TXID }}</h2>
-		<div class="hdr-table">
-			{{ range headersView $set . }}
-			{{ . }}
-			{{ end }}
-		</div>
+			<details {{ $state }}>
+				<summary>{{ .TXID }}</summary>
+				<div class="hdr-table">
+					{{ range headersView $set . }}
+					{{ . }}
+					{{ end }}
+				</div>
+			</details>
+			{{ $state = "" }}
 		{{ end }}
 	</div>
 </div>

assets/templates/views/overview_view.html

@@ -17,13 +17,17 @@ <h1>Overview</h1>
 
 		{{ $set := .Transactions.Set }}
 		{{ $cfg := .Sequence }}
+		{{ $state := "open" }}
 		{{ range .Transactions.Set.UniqueRootParents false }}
-		<h3>{{ .TXID }}</h3>
-		<h4>Sequence Diagram</h4>
-		<div class="sequence">{{ sequence $set . $cfg }}</div>
-		<h4>VSL Log</h4>
-		<pre>{{ $set.RawLogForTx . true }}</pre>
-		<br>
+			<details {{ $state }}>
+				<summary>{{ .TXID }}</summary>
+				<h4>Sequence Diagram</h4>
+				<div class="sequence">{{ sequence $set . $cfg }}</div>
+				<h4>VSL Log</h4>
+				<pre>{{ $set.RawLogForTx . true }}</pre>
+				<br>
+			</details>
+			{{ $state = "" }}
 		{{ end }}
 	</div>
 </div>

assets/templates/views/vcl_log_tree_view.html

@@ -14,13 +14,17 @@ <h1>VCL Log Tree</h1>
 			tags display elapsed time in a human-readable format, and unset headers are shown with strikethrough text.</p>
 
 		{{ $set := .Transactions.Set }}
+		{{ $state := "open" }}
 		{{ range .Transactions.Set.UniqueRootParents true }}
-		<h2>Tree for {{ .TXID }}</h2>
-		<div class="txtree">
-			{{ renderTXLogTree $set . }}
-		</div>
-		<br>
-		<br>
+			<details {{ $state }}>
+				<summary>Tree for {{ .TXID }}</summary>
+				<div class="txtree">
+					{{ renderTXLogTree $set . }}
+				</div>
+				<br>
+				<br>
+			</details>
+			{{ $state = "" }}
 		{{ end }}
 	</div>
 </div>