From 37cf7407fc68902dd38b89686e451dd7cb2328e6 Mon Sep 17 00:00:00 2001
From: Henri Koski <henri.t.koski@gmail.com>
Date: Mon, 3 Jun 2024 20:58:36 +0300
Subject: [PATCH] Fix tx links

---
 api/assets/style.css         |  8 ++++++++
 api/templates/index.templ    | 24 +++++++++++++++-------
 api/templates/index_templ.go | 40 +++++++++++++++++++++++++++++-------
 3 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/api/assets/style.css b/api/assets/style.css
index 61c79eb..76c26d2 100644
--- a/api/assets/style.css
+++ b/api/assets/style.css
@@ -58,6 +58,10 @@
   font-family: Inter;
 }
 
+a {
+  all: unset;
+}
+
 body {
   text-transform: uppercase;
   margin: 0;
@@ -1030,6 +1034,10 @@ body.dark .tx-id-block-copy svg path {
     min-width: 0px;
   }
 
+  .tr>.end {
+    display: none;
+  }
+
   .tx-id-block-value {
     margin-bottom: 10px;
   }
diff --git a/api/templates/index.templ b/api/templates/index.templ
index 8883224..0b4fb59 100644
--- a/api/templates/index.templ
+++ b/api/templates/index.templ
@@ -99,8 +99,8 @@ templ Table(events []model.Event, query url.Values) {
 }
 
 templ Row(e model.Event) {
-	<div id={ e.TxID } class="tr" hx-get={ "/tx/" + e.TxID } hx-trigger="click" sse-swap={ e.TxID } hx-swap="outerHTML">
-		<div class="left">
+	<div id={ e.TxID } class="tr" sse-swap={ e.TxID } hx-swap="outerHTML">
+		<a class="left" { txLinkAttrs(e.TxID)... }>
 			<div class="td">
 				<div class="mobile-label">State</div>
 				<div>
@@ -111,8 +111,8 @@ templ Row(e model.Event) {
 				<div class="mobile-label">Transaction ID</div>
 				<div>{ e.TxID }</div>
 			</div>
-		</div>
-		<div class="right">
+		</a>
+		<a class="right" { txLinkAttrs(e.TxID)... }>
 			<div class="td">
 				<div class="mobile-label">Prover ID</div>
 				<div>
@@ -128,10 +128,10 @@ templ Row(e model.Event) {
 					<span class="datetime">{ e.Timestamp.Format("03:04 PM, 02/01/06") }</span>
 				</div>
 			</div>
-		</div>
-		<div class="end">
+		</a>
+		<a class="end" { txLinkAttrs(e.TxID)... }>
 			<span class="arrow">→</span>
-		</div>
+		</a>
 	</div>
 }
 
@@ -332,3 +332,13 @@ func formatDuration(d time.Duration) string {
 	second := int(d.Seconds()) % 60
 	return fmt.Sprintf("%02dH:%02dM:%02dS", hour, minute, second)
 }
+
+func txLinkAttrs(txID string) templ.Attributes {
+	return templ.Attributes{
+		"href":       "/tx/" + txID,
+		"hx-trigger": "click",
+		"hx-get":     "/tx/" + txID,
+		"hx-swap":    "outerHTML",
+		"hx-target":  "#table",
+	}
+}
diff --git a/api/templates/index_templ.go b/api/templates/index_templ.go
index 01bba2a..b8c2bad 100644
--- a/api/templates/index_templ.go
+++ b/api/templates/index_templ.go
@@ -323,23 +323,23 @@ func Row(e model.Event) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"tr\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"tr\" sse-swap=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString("/tx/" + e.TxID))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(e.TxID))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" sse-swap=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\"><a class=\"left\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(e.TxID))
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, txLinkAttrs(e.TxID))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\"><div class=\"left\"><div class=\"td\"><div class=\"mobile-label\">State</div><div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div class=\"td\"><div class=\"mobile-label\">State</div><div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -382,7 +382,15 @@ func Row(e model.Event) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><div class=\"right\"><div class=\"td\"><div class=\"mobile-label\">Prover ID</div><div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></a> <a class=\"right\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, txLinkAttrs(e.TxID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div class=\"td\"><div class=\"mobile-label\">Prover ID</div><div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -431,7 +439,15 @@ func Row(e model.Event) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div></div><div class=\"end\"><span class=\"arrow\">→</span></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div></a> <a class=\"end\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, txLinkAttrs(e.TxID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><span class=\"arrow\">→</span></a></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -872,3 +888,13 @@ func formatDuration(d time.Duration) string {
 	second := int(d.Seconds()) % 60
 	return fmt.Sprintf("%02dH:%02dM:%02dS", hour, minute, second)
 }
+
+func txLinkAttrs(txID string) templ.Attributes {
+	return templ.Attributes{
+		"href":       "/tx/" + txID,
+		"hx-trigger": "click",
+		"hx-get":     "/tx/" + txID,
+		"hx-swap":    "outerHTML",
+		"hx-target":  "#table",
+	}
+}