From b684b3cd88ff3488ace474b8841cd6f2cc0f729f Mon Sep 17 00:00:00 2001
From: s0lray <s0lray@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:51:15 -0400
Subject: [PATCH] feat(ui): replace text suffixes with color-coded SVG badges
 (THE-73)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Parse (T)/(D)/(R)/(M) suffixes from tool names and render them as
colored tspan elements in the SVG tree. Add matching badge pill styles
to the HTML legend so it visually matches the tree indicators.

- T (tool) → blue #4a9eda
- D (dork) → orange #e8944a
- R (registration) → amber #c8a030
- M (manual URL) → purple #9a7eda

Badge colors are theme-invariant; they work on both dark and light
backgrounds without separate light-mode overrides.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 public/css/arf.css | 21 +++++++++++++++++++++
 public/index.html  | 10 ++++++----
 public/js/arf.js   | 31 +++++++++++++++++++++++++++++--
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/public/css/arf.css b/public/css/arf.css
index 3238f8b..d590b95 100644
--- a/public/css/arf.css
+++ b/public/css/arf.css
@@ -12,6 +12,12 @@
   --color-noscript-border:  #7a4a00;
   --color-legend:           #e0e0e0;
   --color-header:           #e0e0e0;
+
+  /* Status badge colors — saturated enough for both light and dark backgrounds */
+  --badge-T: #4a9eda;
+  --badge-D: #e8944a;
+  --badge-R: #c8a030;
+  --badge-M: #9a7eda;
 }
 
 body.light-mode {
@@ -105,3 +111,18 @@ h3 {
 a {
   color: var(--color-node-stroke);
 }
+
+/* Status badge pills (used in legend) */
+.badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: #fff;
+  vertical-align: middle;
+}
+.badge-T { background-color: var(--badge-T); }
+.badge-D { background-color: var(--badge-D); }
+.badge-R { background-color: var(--badge-R); }
+.badge-M { background-color: var(--badge-M); }
diff --git a/public/index.html b/public/index.html
index e349123..991a897 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,10 +32,12 @@
 
     <script src="js/arf.js"></script>
 
-    <div class="legend"><p>(T) - Indicates a link to a tool that must be installed and run locally<br>
-    (D) - Google Dork, for more information: <a href="https://en.wikipedia.org/wiki/Google_hacking">Google Hacking</a><br>
-    (R) - Requires registration<br>
-    (M) - Indicates a URL that contains the search term and the URL itself must be edited manually<br></p>
+    <div class="legend"><p>
+    <span class="badge badge-T">T</span> - Indicates a link to a tool that must be installed and run locally<br>
+    <span class="badge badge-D">D</span> - Google Dork, for more information: <a href="https://en.wikipedia.org/wiki/Google_hacking">Google Hacking</a><br>
+    <span class="badge badge-R">R</span> - Requires registration<br>
+    <span class="badge badge-M">M</span> - Indicates a URL that contains the search term and the URL itself must be edited manually<br>
+    </p>
     <button id="theme-toggle" onclick="goDark()">Switch to light mode</button>
     <script>
       (function() {
diff --git a/public/js/arf.js b/public/js/arf.js
index b3fa05f..58afe1f 100644
--- a/public/js/arf.js
+++ b/public/js/arf.js
@@ -22,6 +22,22 @@ function getCSSVar(name) {
   return getComputedStyle(document.body).getPropertyValue(name).trim();
 }
 
+// Parse "(T)", "(D)", "(R)", "(M)" suffixes out of a tool name.
+// Returns { cleanName: string, badges: string[] }.
+var BADGE_TYPES = ['T', 'D', 'R', 'M'];
+function parseName(name) {
+  var badges = [];
+  var clean = name;
+  BADGE_TYPES.forEach(function(b) {
+    var suffix = ' (' + b + ')';
+    if (clean.indexOf(suffix) !== -1) {
+      badges.push(b);
+      clean = clean.replace(suffix, '');
+    }
+  });
+  return { cleanName: clean, badges: badges };
+}
+
 d3.json("arf.json").then(function(json) {
   root = d3.hierarchy(json, function(d) {
     return d && d.children ? d.children.filter(function(c) { return c != null; }) : null;
@@ -72,11 +88,22 @@ function update(source) {
       .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
       .attr("dy", ".35em")
       .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
-      .text(function(d) { return d.data.name; })
       .style("fill", function(d) {
         return d.data.free ? getCSSVar("--color-text-primary") : getCSSVar("--color-text-secondary");
       })
-      .style("fill-opacity", 1e-6);
+      .style("fill-opacity", 1e-6)
+      .each(function(d) {
+        var parsed = parseName(d.data.name);
+        var el = d3.select(this);
+        el.append("tspan").text(parsed.cleanName);
+        parsed.badges.forEach(function(b) {
+          el.append("tspan")
+            .attr("dx", "4")
+            .style("font-size", "10px")
+            .style("fill", getCSSVar("--badge-" + b))
+            .text("(" + b + ")");
+        });
+      });
 
   nodeEnter.append("title")
     .text(function(d) {