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

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" />

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>
         ),

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
+        <BacklinksExternalLink
-          from="/p/$projectId/backlinks"
+          url={getDomainWebsiteHref(domain)}
-          to="/p/$projectId/backlinks"
+          label={domain}
-          search={{ target: domain, scope: "domain", tab: undefined }}
+          className="link link-primary link-hover break-all inline-flex items-center gap-1"
-          className="link link-primary link-hover break-all"
+        />
-        >
-          {domain}
-        </Link>
       );
     },
     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,
 }: {

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>