From 44073498ed929bca08025b9e92c419ba5d81bbd1 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Fri, 22 May 2026 21:29:45 -0400
Subject: [PATCH] Use TanStack links for internal table and shell navigation
 (#215)

* Use TanStack Link for audit issues and external RD links

* Use router link for billing menu

* Fix brand lookup tooltip clipping
---
 .../components/BrandLookupResults.tsx         |  4 ++--
 .../features/audit/results/ResultsTables.tsx  |  9 +++++---
 .../backlinks/ReferringDomainsTable.tsx       | 23 +++++++++++--------
 src/client/layout/AppShell.tsx                |  4 ++--
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/client/features/ai-search/components/BrandLookupResults.tsx b/src/client/features/ai-search/components/BrandLookupResults.tsx
index a7d68d4..553f38e 100644
--- a/src/client/features/ai-search/components/BrandLookupResults.tsx
+++ b/src/client/features/ai-search/components/BrandLookupResults.tsx
@@ -112,7 +112,7 @@ function BrandHeader({ result }: { result: BrandLookupResult }) {
 
 function KpiTiles({ result }: { result: BrandLookupResult }) {
   return (
-    <section className="flex flex-col divide-y divide-base-200 overflow-hidden rounded-xl border border-base-300 bg-base-100">
+    <section className="flex flex-col divide-y divide-base-200 rounded-xl border border-base-300 bg-base-100">
       <KpiTile
         label="Total mentions"
         tooltip="Number of LLM answers where your domain appeared in the text or citations."
@@ -194,7 +194,7 @@ function PlatformStatRow({
         {formatPlatformLabel(row.platform)}
         {row.platform === "chat_gpt" ? (
           <span
-            className="tooltip tooltip-right inline-flex"
+            className="tooltip tooltip-right z-20 inline-flex"
             data-tip="DataForSEO indexes ChatGPT mentions for US English only — country selection is not available for this platform."
           >
             <Info className="size-3 text-base-content/40" />
diff --git a/src/client/features/audit/results/ResultsTables.tsx b/src/client/features/audit/results/ResultsTables.tsx
index 7995607..6745f23 100644
--- a/src/client/features/audit/results/ResultsTables.tsx
+++ b/src/client/features/audit/results/ResultsTables.tsx
@@ -4,6 +4,7 @@ import {
   type ColumnDef,
   type SortingState,
 } from "@tanstack/react-table";
+import { Link } from "@tanstack/react-router";
 import { ExternalLink } from "lucide-react";
 import {
   AppDataTable,
@@ -330,12 +331,14 @@ function buildPerformanceColumns({
       header: () => "Issues",
       cell: ({ row }) =>
         row.original.r2Key && !isLighthouseFailure(row.original) ? (
-          <a
+          <Link
             className="btn btn-primary btn-xs"
-            href={`/p/${projectId}/audit/issues/${row.original.id}?auditId=${auditId}&category=performance`}
+            to="/p/$projectId/audit/issues/$resultId"
+            params={{ projectId, resultId: row.original.id }}
+            search={{ auditId, category: "performance" }}
           >
             View issues
-          </a>
+          </Link>
         ) : (
           <span className="text-xs text-base-content/40">-</span>
         ),
diff --git a/src/client/features/backlinks/ReferringDomainsTable.tsx b/src/client/features/backlinks/ReferringDomainsTable.tsx
index 14cc1bb..7367717 100644
--- a/src/client/features/backlinks/ReferringDomainsTable.tsx
+++ b/src/client/features/backlinks/ReferringDomainsTable.tsx
@@ -3,7 +3,6 @@ import {
   type SortingFn,
   type SortingState,
 } from "@tanstack/react-table";
-import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 import {
   AppDataTable,
@@ -24,6 +23,7 @@ import {
   formatDecimal,
   formatNumber,
 } from "./backlinksPageUtils";
+import { BacklinksExternalLink } from "./BacklinksPageLinks";
 
 type ReferringDomainRow = BacklinksOverviewData["referringDomains"][number];
 
@@ -60,14 +60,11 @@ const columns = [
       const domain = getValue();
       if (!domain) return "-";
       return (
-        <Link
-          from="/p/$projectId/backlinks"
-          to="/p/$projectId/backlinks"
-          search={{ target: domain, scope: "domain", tab: undefined }}
-          className="link link-primary link-hover break-all"
-        >
-          {domain}
-        </Link>
+        <BacklinksExternalLink
+          url={getDomainWebsiteHref(domain)}
+          label={domain}
+          className="link link-primary link-hover break-all inline-flex items-center gap-1"
+        />
       );
     },
     sortingFn: stringNullsLast,
@@ -157,6 +154,14 @@ const columns = [
 
 const DEFAULT_SORTING: SortingState = [{ id: "backlinks", desc: true }];
 
+function getDomainWebsiteHref(domain: string) {
+  try {
+    return new URL(domain).toString();
+  } catch {
+    return `https://${domain}`;
+  }
+}
+
 export function ReferringDomainsTable({
   rows,
 }: {
diff --git a/src/client/layout/AppShell.tsx b/src/client/layout/AppShell.tsx
index aff6d1b..34c8f22 100644
--- a/src/client/layout/AppShell.tsx
+++ b/src/client/layout/AppShell.tsx
@@ -338,10 +338,10 @@ function AccountMenu({ mobileOnly = false }: { mobileOnly?: boolean }) {
           ) : null}
           {isHostedMode ? (
             <li>
-              <a href={BILLING_ROUTE} className="flex items-center gap-2">
+              <Link to={BILLING_ROUTE} className="flex items-center gap-2">
                 <CreditCard className="h-4 w-4" />
                 Billing
-              </a>
+              </Link>
             </li>
           ) : null}
           <li>