From e9cb98eb5074772f587ca740a45847b5e42024c1 Mon Sep 17 00:00:00 2001
From: Guilherme Rugai Freire <dev@grfreire.com>
Date: Sun, 21 Jul 2024 01:07:50 -0300
Subject: [PATCH] make nthmail a link and addr copiable

---
 pkg/web_server/header.templ |  6 +++---
 pkg/web_server/styles.templ | 26 ++++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/pkg/web_server/header.templ b/pkg/web_server/header.templ
index 14ea7fa..134762d 100644
--- a/pkg/web_server/header.templ
+++ b/pkg/web_server/header.templ
@@ -2,12 +2,12 @@ package web_server
 
 templ header(rcpt_addr string) {
 	<div class="header">
-		<h3>
+		<a href="/">
 			nthmail.xyz
-		</h3>
+		</a>
 		<div class="header-addr">
 			<p>inbox: </p>
-			<span>{ rcpt_addr }</span>
+			<button tooltip="Copied" id="mail-addr" onclick="navigator.clipboard.writeText(document.getElementById('mail-addr').innerText)">{ rcpt_addr }</button>
 		</div>
 	</div>
 }
diff --git a/pkg/web_server/styles.templ b/pkg/web_server/styles.templ
index 5a30b7b..65bca81 100644
--- a/pkg/web_server/styles.templ
+++ b/pkg/web_server/styles.templ
@@ -106,20 +106,42 @@ templ styles() {
             font-family: monospace, "sans-serif";
         }
 
-        .header h3 {
+        .header a {
             font-weight: bold;    
+            font-size: 1.65rem;
+            text-decoration: none;
+            color: inherit;
         }
 
         .header .header-addr {
             display: flex;
             flex-direction: row;
+            padding-bottom: 4px;
+            position: relative;
         }
 
-        .header .header-addr span {
+        .header .header-addr button {
+            background: none;
+            color: inherit;
+            border: none;
+            font: inherit;
+            cursor: pointer;
+            outline: inherit;
+            user-select: text;
+
             margin-left: 18px;
             font-style: italic;
         }
 
+        *[tooltip]:focus:after {
+            content: attr(tooltip);
+            display:block;
+            position: absolute;
+            top: 130%;
+            left: 50%;
+            font-style: normal;
+        }
+
         /* FOOTER */
         footer {
             background-color: green;