From fdb2d453e42e5af5303eb4493b76f7a38d02ca39 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Sat, 4 Apr 2026 17:26:22 -0400
Subject: [PATCH] feat: color-code rank badges in backlinks tables (#73)

* feat: color-code rank badges in backlinks tables

Add colored score badges to rank/authority columns across all backlinks
tables (Backlinks, Referring Domains, Top Pages). Uses the same tier
system as keyword difficulty but reversed (higherIsBetter) so high
authority shows green and low authority shows red.

* style: fix prettier formatting in BacklinksPageTables

* style: fix prettier formatting in subscribe page
---
 .../backlinks/BacklinksPageTables.tsx         | 44 +++++++++++++------
 src/client/features/keywords/utils.ts         | 16 ++++---
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/client/features/backlinks/BacklinksPageTables.tsx b/src/client/features/backlinks/BacklinksPageTables.tsx
index 26b11bd..1777f5f 100644
--- a/src/client/features/backlinks/BacklinksPageTables.tsx
+++ b/src/client/features/backlinks/BacklinksPageTables.tsx
@@ -10,6 +10,7 @@ import {
   BacklinksSourceLink,
 } from "./BacklinksPageLinks";
 import type { BacklinksOverviewData } from "./backlinksPageTypes";
+import { scoreTierClass } from "../keywords/utils";
 import {
   DEFAULT_BACKLINKS_SORT,
   DEFAULT_REFERRING_DOMAINS_SORT,
@@ -78,7 +79,9 @@ export function ReferringDomainsTable({
               <td className="font-medium break-all">{row.domain ?? "-"}</td>
               <td>{formatNumber(row.backlinks)}</td>
               <td>{formatNumber(row.referringPages)}</td>
-              <td>{formatNumber(row.rank)}</td>
+              <td>
+                <RankBadge value={row.rank} />
+              </td>
               <td>{formatDecimal(row.spamScore)}</td>
               <td>{formatCompactDate(row.firstSeen)}</td>
               <td>
@@ -129,7 +132,9 @@ export function TopPagesTable({
               </td>
               <td>{formatNumber(row.backlinks)}</td>
               <td>{formatNumber(row.referringDomains)}</td>
-              <td>{formatNumber(row.rank)}</td>
+              <td>
+                <RankBadge value={row.rank} />
+              </td>
               <td>{formatNumber(row.brokenBacklinks)}</td>
             </tr>
           ))}
@@ -178,19 +183,18 @@ function BacklinksTableRow({
         </div>
       </td>
       <td>{hasNotableFlags ? <BacklinkFlags row={row} /> : null}</td>
-      <td className="text-right tabular-nums text-sm">
-        <span
-          title={
-            row.spamScore != null
-              ? `Spam score: ${formatDecimal(row.spamScore)}`
-              : undefined
-          }
-        >
-          {formatNumber(row.rank)}
-        </span>
+      <td
+        className="text-center"
+        title={
+          row.spamScore != null
+            ? `Spam score: ${formatDecimal(row.spamScore)}`
+            : undefined
+        }
+      >
+        <RankBadge value={row.rank} />
       </td>
-      <td className="text-right tabular-nums text-sm">
-        {formatNumber(row.domainFromRank)}
+      <td className="text-center">
+        <RankBadge value={row.domainFromRank} />
       </td>
       <td className="whitespace-nowrap text-sm">
         <div>{formatCompactDate(row.firstSeen)}</div>
@@ -204,6 +208,18 @@ function BacklinksTableRow({
   );
 }
 
+function RankBadge({ value }: { value: number | null }) {
+  if (value == null) return <span>-</span>;
+  const tierClass = scoreTierClass(value, /* higherIsBetter */ true);
+  return (
+    <span
+      className={`score-badge ${tierClass} inline-flex items-center justify-center rounded-full size-6 text-[10px] font-semibold`}
+    >
+      {value}
+    </span>
+  );
+}
+
 function BacklinkFlags({
   row,
 }: {
diff --git a/src/client/features/keywords/utils.ts b/src/client/features/keywords/utils.ts
index 1f3bc4a..853cf05 100644
--- a/src/client/features/keywords/utils.ts
+++ b/src/client/features/keywords/utils.ts
@@ -1,12 +1,16 @@
 export { LOCATIONS, getLanguageCode } from "./locations";
 
-export function scoreTierClass(value: number | null): string {
+export function scoreTierClass(
+  value: number | null,
+  higherIsBetter?: boolean,
+): string {
   if (value == null) return "score-tier-na";
-  if (value <= 20) return "score-tier-1";
-  if (value <= 35) return "score-tier-2";
-  if (value <= 50) return "score-tier-3";
-  if (value <= 65) return "score-tier-4";
-  if (value <= 80) return "score-tier-5";
+  const v = higherIsBetter ? 100 - value : value;
+  if (v <= 20) return "score-tier-1";
+  if (v <= 35) return "score-tier-2";
+  if (v <= 50) return "score-tier-3";
+  if (v <= 65) return "score-tier-4";
+  if (v <= 80) return "score-tier-5";
   return "score-tier-6";
 }