From 8321164514463de0eae7b7abb494eeedc5b47561 Mon Sep 17 00:00:00 2001
From: Lorenzo Venerandi <lollo.venerandi@gmail.com>
Date: Wed, 4 Mar 2026 13:50:33 +0100
Subject: [PATCH] feat: enhance view request button with tooltip and SVG icon
 for better UX

---
 .../partials/access_by_ip_table.html          |  5 ++-
 .../partials/attack_types_table.html          |  5 ++-
 .../dashboard/partials/search_results.html    |  5 ++-
 .../dashboard/partials/suspicious_table.html  |  5 ++-
 src/templates/static/css/dashboard.css        | 40 +++++++++++++++----
 5 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/templates/jinja2/dashboard/partials/access_by_ip_table.html b/src/templates/jinja2/dashboard/partials/access_by_ip_table.html
index 5e7bd6c..76b35eb 100644
--- a/src/templates/jinja2/dashboard/partials/access_by_ip_table.html
+++ b/src/templates/jinja2/dashboard/partials/access_by_ip_table.html
@@ -45,7 +45,10 @@
             <td>{{ log.timestamp | format_ts }}</td>
             <td>
                 {% if log.id %}
-                <button class="view-btn" @click="viewRawRequest({{ log.id }})">View Request</button>
+                <button class="view-btn" @click="viewRawRequest({{ log.id }})" title="View Request">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
+                    <span class="view-btn-tooltip">View Request</span>
+                </button>
                 {% endif %}
             </td>
         </tr>
diff --git a/src/templates/jinja2/dashboard/partials/attack_types_table.html b/src/templates/jinja2/dashboard/partials/attack_types_table.html
index 4ac3369..905851b 100644
--- a/src/templates/jinja2/dashboard/partials/attack_types_table.html
+++ b/src/templates/jinja2/dashboard/partials/attack_types_table.html
@@ -62,7 +62,10 @@
             <td>{{ attack.timestamp | format_ts }}</td>
             <td style="display: flex; gap: 6px; flex-wrap: wrap;">
                 {% if attack.log_id %}
-                <button class="view-btn" @click="viewRawRequest({{ attack.log_id }})">View Request</button>
+                <button class="view-btn" @click="viewRawRequest({{ attack.log_id }})" title="View Request">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
+                    <span class="view-btn-tooltip">View Request</span>
+                </button>
                 {% endif %}
                 <button class="inspect-btn" @click="openIpInsight('{{ attack.ip | e }}')" title="Inspect IP">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/></svg>
diff --git a/src/templates/jinja2/dashboard/partials/search_results.html b/src/templates/jinja2/dashboard/partials/search_results.html
index 1ae0d41..533a3a8 100644
--- a/src/templates/jinja2/dashboard/partials/search_results.html
+++ b/src/templates/jinja2/dashboard/partials/search_results.html
@@ -118,7 +118,10 @@
                     <td>{{ attack.timestamp | format_ts }}</td>
                     <td>
                         {% if attack.log_id %}
-                        <button class="view-btn" @click="viewRawRequest({{ attack.log_id }})">View Request</button>
+                        <button class="view-btn" @click="viewRawRequest({{ attack.log_id }})" title="View Request">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
+                            <span class="view-btn-tooltip">View Request</span>
+                        </button>
                         {% endif %}
                     </td>
                 </tr>
diff --git a/src/templates/jinja2/dashboard/partials/suspicious_table.html b/src/templates/jinja2/dashboard/partials/suspicious_table.html
index 1b7f10b..73555b8 100644
--- a/src/templates/jinja2/dashboard/partials/suspicious_table.html
+++ b/src/templates/jinja2/dashboard/partials/suspicious_table.html
@@ -26,7 +26,10 @@
                 <td>{{ activity.timestamp | format_ts(time_only=True) }}</td>
                 <td style="display: flex; gap: 6px; flex-wrap: wrap;">
                     {% if activity.log_id %}
-                    <button class="view-btn" @click="viewRawRequest({{ activity.log_id }})">View Request</button>
+                    <button class="view-btn" @click="viewRawRequest({{ activity.log_id }})" title="View Request">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
+                        <span class="view-btn-tooltip">View Request</span>
+                    </button>
                     {% endif %}
                     <button class="inspect-btn" @click="openIpInsight('{{ activity.ip | e }}')" title="Inspect IP">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/></svg>
diff --git a/src/templates/static/css/dashboard.css b/src/templates/static/css/dashboard.css
index fa5fbae..2802178 100644
--- a/src/templates/static/css/dashboard.css
+++ b/src/templates/static/css/dashboard.css
@@ -1603,19 +1603,45 @@ tbody {
 
 /* Dynamically injected button styles (previously in JS) */
 .view-btn {
-    padding: 4px 10px;
-    background: #21262d;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: none;
+    color: #8b949e;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+}
+.view-btn:hover {
     color: #58a6ff;
+    background: rgba(88, 166, 255, 0.1);
+}
+.view-btn svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+}
+.view-btn-tooltip {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    background: #1c2128;
+    color: #e6edf3;
     border: 1px solid #30363d;
     border-radius: 4px;
     font-size: 11px;
-    cursor: pointer;
-    transition: all 0.2s;
     white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s;
 }
-.view-btn:hover {
-    background: #30363d;
-    border-color: #58a6ff;
+.view-btn:hover .view-btn-tooltip {
+    opacity: 1;
 }
 .inspect-btn {
     display: inline-flex;