From 4c677178c39a907d49ce769f61f74dd0e1da3ca5 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 16:22:00 +0300
Subject: [PATCH 01/16] add basic crossmatch results page

---
 src/App.tsx                     |   9 ++
 src/components/ui/button.tsx    |   2 +-
 src/pages/CrossmatchResults.tsx | 257 ++++++++++++++++++++++++++++++++
 src/pages/TableDetails.tsx      |  28 +++-
 4 files changed, 290 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/CrossmatchResults.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3a84019..dbc6901 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { SearchResultsPage } from "./pages/SearchResults";
 import { ObjectDetailsPage } from "./pages/ObjectDetails";
 import { NotFoundPage } from "./pages/NotFound";
 import { TableDetailsPage } from "./pages/TableDetails";
+import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -51,6 +52,14 @@ function App() {
             </Layout>
           }
         />
+        <Route
+          path="/crossmatch"
+          element={
+            <Layout>
+              <CrossmatchResultsPage />
+            </Layout>
+          }
+        />
         <Route
           path="*"
           element={
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 317445d..0b5fc85 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ export function Button(props: ButtonProps): ReactElement {
       onClick={props.onClick}
       disabled={props.disabled}
       className={classNames(
-        "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white",
+        "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white cursor-pointer",
         props.className,
       )}
     >
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
new file mode 100644
index 0000000..4745f3a
--- /dev/null
+++ b/src/pages/CrossmatchResults.tsx
@@ -0,0 +1,257 @@
+import { ReactElement, useEffect, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import {
+  CommonTable,
+  Column,
+  CellPrimitive,
+} from "../components/ui/common-table";
+import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
+import type {
+  GetRecordsCrossmatchResponse,
+  RecordCrossmatch,
+  RecordCrossmatchStatus,
+  HttpValidationError,
+  ValidationError,
+} from "../clients/admin/types.gen";
+
+export function CrossmatchResultsPage(): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [data, setData] = useState<GetRecordsCrossmatchResponse | null>(null);
+  const [error, setError] = useState<HttpValidationError | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const tableName = searchParams.get("table_name");
+  const status = searchParams.get("status") as RecordCrossmatchStatus | null;
+  const page = parseInt(searchParams.get("page") || "0");
+  const pageSize = parseInt(searchParams.get("page_size") || "25");
+
+  useEffect(() => {
+    async function fetchData() {
+      if (!tableName) {
+        navigate("/");
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response =
+          await getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet({
+            query: {
+              table_name: tableName,
+              status: status || undefined,
+              page: page,
+              page_size: pageSize,
+            },
+          });
+
+        if (response.error) {
+          setError(response.error);
+          return;
+        }
+
+        if (response.data) {
+          setData(response.data.data);
+        }
+      } catch (err) {
+        console.error("Error fetching crossmatch records", err);
+        setError({
+          detail: [
+            {
+              loc: [],
+              msg: "Failed to fetch crossmatch records",
+              type: "value_error",
+            },
+          ],
+        });
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [tableName, status, page, pageSize, navigate]);
+
+  function handlePageChange(newPage: number): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("page", newPage.toString());
+    setSearchParams(newSearchParams);
+  }
+
+  function handlePageSizeChange(newPageSize: number): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("page_size", newPageSize.toString());
+    newSearchParams.set("page", "0");
+    setSearchParams(newSearchParams);
+  }
+
+  function handleStatusChange(newStatus: string): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+    if (newStatus === "all") {
+      newSearchParams.delete("status");
+    } else {
+      newSearchParams.set("status", newStatus);
+    }
+    newSearchParams.set("page", "0");
+    setSearchParams(newSearchParams);
+  }
+
+  function getRecordName(record: RecordCrossmatch): string {
+    return record.catalogs.designation?.name || record.record_id;
+  }
+
+  function getCandidates(record: RecordCrossmatch): string {
+    if (record.status === "new") {
+      return "NULL";
+    }
+
+    if (record.status === "existing" && record.metadata.pgc) {
+      return `PGC ${record.metadata.pgc}`;
+    }
+
+    if (record.status === "collided" && record.metadata.possible_matches) {
+      return record.metadata.possible_matches
+        .map((pgc: number) => `PGC ${pgc}`)
+        .join(", ");
+    }
+
+    return "NULL";
+  }
+
+  function getStatusLabel(status: RecordCrossmatchStatus): string {
+    const statusLabels: Record<RecordCrossmatchStatus, string> = {
+      unprocessed: "Unprocessed",
+      new: "New",
+      collided: "Collided",
+      existing: "Existing",
+    };
+    return statusLabels[status];
+  }
+
+  const columns: Column[] = [
+    { name: "Record Name" },
+    { name: "Status" },
+    { name: "Candidates" },
+  ];
+
+  const tableData: Record<string, CellPrimitive>[] =
+    data?.records.map((record: RecordCrossmatch) => ({
+      "Record Name": getRecordName(record),
+      Status: getStatusLabel(record.status),
+      Candidates: getCandidates(record),
+    })) || [];
+
+  if (loading) {
+    return (
+      <div className="p-8">
+        <div className="flex justify-center items-center h-64">
+          <p className="text-gray-300 text-lg">Loading crossmatch results...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-8">
+        <div className="bg-red-900 border border-red-700 rounded p-4">
+          <h2 className="text-xl font-bold text-red-200 mb-2">Error</h2>
+          <p className="text-red-300">
+            {error.detail?.map((err: ValidationError) => err.msg).join(", ") ||
+              "An error occurred"}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!tableName) {
+    return (
+      <div className="p-8">
+        <div className="bg-yellow-900 border border-yellow-700 rounded p-4">
+          <h2 className="text-xl font-bold text-yellow-200 mb-2">
+            Missing Table Name
+          </h2>
+          <p className="text-yellow-300">
+            Please provide a table_name parameter.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-white mb-4">
+          Crossmatch Results for {tableName}
+        </h1>
+
+        <div className="flex gap-4 mb-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Status Filter
+            </label>
+            <select
+              value={status || "all"}
+              onChange={(e) => handleStatusChange(e.target.value)}
+              className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+            >
+              <option value="all">All Statuses</option>
+              <option value="unprocessed">Unprocessed</option>
+              <option value="new">New</option>
+              <option value="collided">Collided</option>
+              <option value="existing">Existing</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Page Size
+            </label>
+            <select
+              value={pageSize}
+              onChange={(e) => handlePageSizeChange(parseInt(e.target.value))}
+              className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+            >
+              <option value={10}>10</option>
+              <option value={25}>25</option>
+              <option value={50}>50</option>
+              <option value={100}>100</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <CommonTable columns={columns} data={tableData} className="mb-6">
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-bold">Crossmatch Records</h2>
+          <div className="text-sm text-gray-400">
+            Showing {tableData.length} records
+          </div>
+        </div>
+      </CommonTable>
+
+      <div className="flex justify-between items-center">
+        <button
+          onClick={() => handlePageChange(page - 1)}
+          disabled={page === 0}
+          className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600"
+        >
+          Previous
+        </button>
+
+        <span className="text-gray-300">Page {page + 1}</span>
+
+        <button
+          onClick={() => handlePageChange(page + 1)}
+          disabled={tableData.length < pageSize}
+          className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 5703fee..95b433d 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -3,7 +3,7 @@ import {
   Bibliography,
   GetTableResponse,
   HttpValidationError,
-  ObjectCrossmatchStatus,
+  RecordCrossmatchStatus,
 } from "../clients/admin/types.gen";
 import { getTableAdminApiV1TableGet } from "../clients/admin/sdk.gen";
 import { useNavigate, useParams } from "react-router-dom";
@@ -12,6 +12,7 @@ import {
   Column,
   CommonTable,
 } from "../components/ui/common-table";
+import { Button } from "../components/ui/button";
 import { CopyButton } from "../components/ui/copy-button";
 import { Link } from "../components/ui/link";
 import { getResource } from "../resources/resources";
@@ -156,6 +157,8 @@ function MarkingRules(props: MarkingRulesProps): ReactElement {
 
 interface CrossmatchStatsProps {
   table: GetTableResponse;
+  tableName: string;
+  navigate: (path: string) => void;
 }
 
 function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
@@ -164,7 +167,7 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
   const values: Record<string, CellPrimitive>[] = [];
 
   if (props.table.statistics) {
-    const statusLabels: Record<ObjectCrossmatchStatus, string> = {
+    const statusLabels: Record<RecordCrossmatchStatus, string> = {
       unprocessed: "Unprocessed",
       new: "New",
       collided: "Collided",
@@ -173,7 +176,7 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
 
     Object.entries(props.table.statistics).forEach(([status, count]) => {
       values.push({
-        Status: statusLabels[status as ObjectCrossmatchStatus] || status,
+        Status: statusLabels[status as RecordCrossmatchStatus] || status,
         Count: count || 0,
       });
     });
@@ -183,9 +186,20 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
     return <div></div>;
   }
 
+  function handleViewCrossmatchResults(): void {
+    props.navigate(
+      `/crossmatch?table_name=${encodeURIComponent(props.tableName)}`,
+    );
+  }
+
   return (
     <CommonTable columns={columns} data={values} className="pb-5">
-      <h2 className="text-2xl font-bold">Crossmatch Statistics</h2>
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">Crossmatch Statistics</h2>
+        <Button onClick={handleViewCrossmatchResults}>
+          View Crossmatch Results
+        </Button>
+      </div>
     </CommonTable>
   );
 }
@@ -304,7 +318,11 @@ export function TableDetailsPage(): ReactElement {
         <div>
           <TableMeta tableName={tableName ?? ""} table={table} />
           <MarkingRules table={table} />
-          <CrossmatchStats table={table} />
+          <CrossmatchStats
+            table={table}
+            tableName={tableName ?? ""}
+            navigate={navigate}
+          />
           <ColumnInfo table={table} />
         </div>
       ) : error ? (

From 0d8f3b49fcc1ce8a166a1d1b1c18bcb56be55c62 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 16:28:19 +0300
Subject: [PATCH 02/16] add badges

---
 src/pages/CrossmatchResults.tsx | 45 +++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 4745f3a..05056f1 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -5,6 +5,7 @@ import {
   Column,
   CellPrimitive,
 } from "../components/ui/common-table";
+import { CopyButton } from "../components/ui/copy-button";
 import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
 import type {
   GetRecordsCrossmatchResponse,
@@ -101,22 +102,38 @@ export function CrossmatchResultsPage(): ReactElement {
     return record.catalogs.designation?.name || record.record_id;
   }
 
-  function getCandidates(record: RecordCrossmatch): string {
+  function renderCandidates(record: RecordCrossmatch): ReactElement {
     if (record.status === "new") {
-      return "NULL";
+      return <span>NULL</span>;
     }
 
     if (record.status === "existing" && record.metadata.pgc) {
-      return `PGC ${record.metadata.pgc}`;
+      const pgcText = `PGC ${record.metadata.pgc}`;
+      return (
+        <div className="inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm">
+          {pgcText}
+        </div>
+      );
     }
 
     if (record.status === "collided" && record.metadata.possible_matches) {
-      return record.metadata.possible_matches
-        .map((pgc: number) => `PGC ${pgc}`)
-        .join(", ");
+      const pgcNumbers = record.metadata.possible_matches;
+
+      return (
+        <div>
+          {pgcNumbers.map((pgc: number, index: number) => (
+            <div
+              key={`${pgc}-${index}`}
+              className="inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm mr-0.5 mb-0.5"
+            >
+              PGC {pgc}
+            </div>
+          ))}
+        </div>
+      );
     }
 
-    return "NULL";
+    return <span>NULL</span>;
   }
 
   function getStatusLabel(status: RecordCrossmatchStatus): string {
@@ -132,14 +149,22 @@ export function CrossmatchResultsPage(): ReactElement {
   const columns: Column[] = [
     { name: "Record Name" },
     { name: "Status" },
-    { name: "Candidates" },
+    {
+      name: "Candidates",
+      renderCell: (recordIndex: CellPrimitive) => {
+        if (typeof recordIndex === "number" && data?.records[recordIndex]) {
+          return renderCandidates(data.records[recordIndex]);
+        }
+        return <span>NULL</span>;
+      },
+    },
   ];
 
   const tableData: Record<string, CellPrimitive>[] =
-    data?.records.map((record: RecordCrossmatch) => ({
+    data?.records.map((record: RecordCrossmatch, index: number) => ({
       "Record Name": getRecordName(record),
       Status: getStatusLabel(record.status),
-      Candidates: getCandidates(record),
+      Candidates: index,
     })) || [];
 
   if (loading) {

From 25d666ad1870b25dbfdfdda5301cd241dc29656a Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 16:31:21 +0300
Subject: [PATCH 03/16] move badge component

---
 src/components/ui/badge.tsx     | 16 ++++++++++++++++
 src/pages/CrossmatchResults.tsx | 15 ++++-----------
 src/pages/TableDetails.tsx      |  8 +++-----
 3 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ui/badge.tsx

diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..4af19d8
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Badge({ children, className = "" }: BadgeProps): ReactElement {
+  return (
+    <div
+      className={`inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 05056f1..6352e75 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -5,7 +5,7 @@ import {
   Column,
   CellPrimitive,
 } from "../components/ui/common-table";
-import { CopyButton } from "../components/ui/copy-button";
+import { Badge } from "../components/ui/badge";
 import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
 import type {
   GetRecordsCrossmatchResponse,
@@ -109,11 +109,7 @@ export function CrossmatchResultsPage(): ReactElement {
 
     if (record.status === "existing" && record.metadata.pgc) {
       const pgcText = `PGC ${record.metadata.pgc}`;
-      return (
-        <div className="inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm">
-          {pgcText}
-        </div>
-      );
+      return <Badge>{pgcText}</Badge>;
     }
 
     if (record.status === "collided" && record.metadata.possible_matches) {
@@ -122,12 +118,9 @@ export function CrossmatchResultsPage(): ReactElement {
       return (
         <div>
           {pgcNumbers.map((pgc: number, index: number) => (
-            <div
-              key={`${pgc}-${index}`}
-              className="inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm mr-0.5 mb-0.5"
-            >
+            <Badge key={`${pgc}-${index}`} className="mr-0.5 mb-0.5">
               PGC {pgc}
-            </div>
+            </Badge>
           ))}
         </div>
       );
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 95b433d..f22bc7c 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -14,6 +14,7 @@ import {
 } from "../components/ui/common-table";
 import { Button } from "../components/ui/button";
 import { CopyButton } from "../components/ui/copy-button";
+import { Badge } from "../components/ui/badge";
 import { Link } from "../components/ui/link";
 import { getResource } from "../resources/resources";
 
@@ -56,12 +57,9 @@ function renderUCD(ucd: CellPrimitive): ReactElement {
 
   ucd.split(";").forEach((word, index) => {
     words.push(
-      <div
-        key={`${word}-${index}`}
-        className="inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm mr-0.5 mb-0.5"
-      >
+      <Badge key={`${word}-${index}`} className="mr-0.5 mb-0.5">
         {word}
-      </div>,
+      </Badge>,
     );
   });
 

From 2931bcd616a94ef1dd1ae1167c75dd5bcfab33ff Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 16:40:08 +0300
Subject: [PATCH 04/16] add link to PGC object in the table

---
 src/components/ui/badge.tsx     | 26 ++++++++++++++++++--------
 src/pages/CrossmatchResults.tsx |  8 ++++----
 src/pages/TableDetails.tsx      |  2 +-
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 4af19d8..22612d6 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,16 +1,26 @@
 import { ReactElement } from "react";
+import { Link } from "./link";
 
 interface BadgeProps {
   children: React.ReactNode;
   className?: string;
+  href?: string;
 }
 
-export function Badge({ children, className = "" }: BadgeProps): ReactElement {
-  return (
-    <div
-      className={`inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm ${className}`}
-    >
-      {children}
-    </div>
-  );
+export function Badge({
+  children,
+  className = "",
+  href,
+}: BadgeProps): ReactElement {
+  const badgeClasses = `inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm mr-0.5 mb-0.5 ${className}`;
+
+  if (href) {
+    return (
+      <Link href={href}>
+        <span className={badgeClasses}>{children}</span>
+      </Link>
+    );
+  }
+
+  return <div className={badgeClasses}>{children}</div>;
 }
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 6352e75..10dcf39 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -108,8 +108,8 @@ export function CrossmatchResultsPage(): ReactElement {
     }
 
     if (record.status === "existing" && record.metadata.pgc) {
-      const pgcText = `PGC ${record.metadata.pgc}`;
-      return <Badge>{pgcText}</Badge>;
+      const pgcText = `${record.metadata.pgc}`;
+      return <Badge href={`/object/${record.metadata.pgc}`}>{pgcText}</Badge>;
     }
 
     if (record.status === "collided" && record.metadata.possible_matches) {
@@ -118,8 +118,8 @@ export function CrossmatchResultsPage(): ReactElement {
       return (
         <div>
           {pgcNumbers.map((pgc: number, index: number) => (
-            <Badge key={`${pgc}-${index}`} className="mr-0.5 mb-0.5">
-              PGC {pgc}
+            <Badge key={`${pgc}-${index}`} href={`/object/${pgc}`}>
+              {pgc}
             </Badge>
           ))}
         </div>
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index f22bc7c..089814f 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -57,7 +57,7 @@ function renderUCD(ucd: CellPrimitive): ReactElement {
 
   ucd.split(";").forEach((word, index) => {
     words.push(
-      <Badge key={`${word}-${index}`} className="mr-0.5 mb-0.5">
+      <Badge key={`${word}-${index}`}>
         {word}
       </Badge>,
     );

From bde22f46ea65a9b3a41d895ad035b8b955b0a980 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 16:56:18 +0300
Subject: [PATCH 05/16] move dropdown to a separate component & fix button
 styling

---
 src/assets/texts.json           |  8 +++-
 src/components/ui/button.tsx    |  4 ++
 src/components/ui/dropdown.tsx  | 40 +++++++++++++++++
 src/pages/CrossmatchResults.tsx | 79 ++++++++++++++-------------------
 4 files changed, 83 insertions(+), 48 deletions(-)
 create mode 100644 src/components/ui/dropdown.tsx

diff --git a/src/assets/texts.json b/src/assets/texts.json
index e843a99..24bb09d 100644
--- a/src/assets/texts.json
+++ b/src/assets/texts.json
@@ -2,6 +2,10 @@
   "title": {
     "catalog.designation": "Designation",
     "catalog.icrs": "Celestial coordinates",
-    "catalog.redshift": "Redshift"
+    "catalog.redshift": "Redshift",
+    "crossmatch.status.unprocessed": "Unprocessed",
+    "crossmatch.status.new": "New",
+    "crossmatch.status.collided": "Collided",
+    "crossmatch.status.existing": "Existing"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0b5fc85..83dded8 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -17,6 +17,10 @@ export function Button(props: ButtonProps): ReactElement {
       disabled={props.disabled}
       className={classNames(
         "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white cursor-pointer",
+        {
+          "opacity-50 cursor-not-allowed hover:border-[#1a1a1a] active:border-[#1a1a1a]":
+            props.disabled,
+        },
         props.className,
       )}
     >
diff --git a/src/components/ui/dropdown.tsx b/src/components/ui/dropdown.tsx
new file mode 100644
index 0000000..e456f4e
--- /dev/null
+++ b/src/components/ui/dropdown.tsx
@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+
+interface DropdownOption {
+  value: string;
+  label?: string;
+}
+
+interface DropdownProps {
+  title: string;
+  options: DropdownOption[];
+  defaultValue: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function Dropdown({
+  title,
+  options,
+  value,
+  onChange,
+}: DropdownProps): ReactElement {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-300 mb-1">
+        {title}
+      </label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label || option.value}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 10dcf39..2063062 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -6,6 +6,7 @@ import {
   CellPrimitive,
 } from "../components/ui/common-table";
 import { Badge } from "../components/ui/badge";
+import { Dropdown } from "../components/ui/dropdown";
 import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
 import type {
   GetRecordsCrossmatchResponse,
@@ -14,6 +15,8 @@ import type {
   HttpValidationError,
   ValidationError,
 } from "../clients/admin/types.gen";
+import { getResource } from "../resources/resources";
+import { Button } from "../components/ui/button";
 
 export function CrossmatchResultsPage(): ReactElement {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -130,13 +133,7 @@ export function CrossmatchResultsPage(): ReactElement {
   }
 
   function getStatusLabel(status: RecordCrossmatchStatus): string {
-    const statusLabels: Record<RecordCrossmatchStatus, string> = {
-      unprocessed: "Unprocessed",
-      new: "New",
-      collided: "Collided",
-      existing: "Existing",
-    };
-    return statusLabels[status];
+    return getResource(`crossmatch.status.${status}`).Title;
   }
 
   const columns: Column[] = [
@@ -207,38 +204,32 @@ export function CrossmatchResultsPage(): ReactElement {
         </h1>
 
         <div className="flex gap-4 mb-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-1">
-              Status Filter
-            </label>
-            <select
-              value={status || "all"}
-              onChange={(e) => handleStatusChange(e.target.value)}
-              className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
-            >
-              <option value="all">All Statuses</option>
-              <option value="unprocessed">Unprocessed</option>
-              <option value="new">New</option>
-              <option value="collided">Collided</option>
-              <option value="existing">Existing</option>
-            </select>
-          </div>
+          <Dropdown
+            title="Status Filter"
+            options={[
+              { value: "all", label: "All Statuses" },
+              { value: "unprocessed", label: "Unprocessed" },
+              { value: "new", label: "New" },
+              { value: "collided", label: "Collided" },
+              { value: "existing", label: "Existing" },
+            ]}
+            defaultValue="all"
+            value={status || "all"}
+            onChange={handleStatusChange}
+          />
 
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-1">
-              Page Size
-            </label>
-            <select
-              value={pageSize}
-              onChange={(e) => handlePageSizeChange(parseInt(e.target.value))}
-              className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
-            >
-              <option value={10}>10</option>
-              <option value={25}>25</option>
-              <option value={50}>50</option>
-              <option value={100}>100</option>
-            </select>
-          </div>
+          <Dropdown
+            title="Page Size"
+            options={[
+              { value: "10" },
+              { value: "25" },
+              { value: "50" },
+              { value: "100" },
+            ]}
+            defaultValue="25"
+            value={pageSize.toString()}
+            onChange={(value) => handlePageSizeChange(parseInt(value))}
+          />
         </div>
       </div>
 
@@ -252,23 +243,19 @@ export function CrossmatchResultsPage(): ReactElement {
       </CommonTable>
 
       <div className="flex justify-between items-center">
-        <button
+        <Button
           onClick={() => handlePageChange(page - 1)}
           disabled={page === 0}
-          className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600"
         >
           Previous
-        </button>
-
+        </Button>
         <span className="text-gray-300">Page {page + 1}</span>
-
-        <button
+        <Button
           onClick={() => handlePageChange(page + 1)}
           disabled={tableData.length < pageSize}
-          className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-600"
         >
           Next
-        </button>
+        </Button>
       </div>
     </div>
   );

From 0575c3f62463c66cdd4011e5ea57e602c7c67e4a Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 17:00:46 +0300
Subject: [PATCH 06/16] move loading to a separate component

---
 src/components/ui/loading.tsx   | 19 +++++++++++++++++++
 src/pages/CrossmatchResults.tsx |  9 ++-------
 src/pages/ObjectDetails.tsx     |  5 ++---
 src/pages/SearchResults.tsx     |  3 ++-
 src/pages/TableDetails.tsx      | 11 +++--------
 5 files changed, 28 insertions(+), 19 deletions(-)
 create mode 100644 src/components/ui/loading.tsx

diff --git a/src/components/ui/loading.tsx b/src/components/ui/loading.tsx
new file mode 100644
index 0000000..071abd1
--- /dev/null
+++ b/src/components/ui/loading.tsx
@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+
+interface LoadingProps {
+  message?: string;
+  className?: string;
+}
+
+export function Loading({
+  message = "Loading...",
+  className = "",
+}: LoadingProps): ReactElement {
+  return (
+    <div className={`p-8 ${className}`}>
+      <div className="flex justify-center items-center h-64">
+        <p className="text-gray-300 text-lg">{message}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 2063062..2a4bc79 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -17,6 +17,7 @@ import type {
 } from "../clients/admin/types.gen";
 import { getResource } from "../resources/resources";
 import { Button } from "../components/ui/button";
+import { Loading } from "../components/ui/loading";
 
 export function CrossmatchResultsPage(): ReactElement {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -158,13 +159,7 @@ export function CrossmatchResultsPage(): ReactElement {
     })) || [];
 
   if (loading) {
-    return (
-      <div className="p-8">
-        <div className="flex justify-center items-center h-64">
-          <p className="text-gray-300 text-lg">Loading crossmatch results...</p>
-        </div>
-      </div>
-    );
+    return <Loading />;
   }
 
   if (error) {
diff --git a/src/pages/ObjectDetails.tsx b/src/pages/ObjectDetails.tsx
index a58657a..51c5ad7 100644
--- a/src/pages/ObjectDetails.tsx
+++ b/src/pages/ObjectDetails.tsx
@@ -4,6 +4,7 @@ import { SearchBar } from "../components/ui/searchbar";
 import { Button } from "../components/ui/button";
 import { AladinViewer } from "../components/ui/aladin";
 import { CommonTable } from "../components/ui/common-table";
+import { Loading } from "../components/ui/loading";
 import { querySimpleApiV1QuerySimpleGet } from "../clients/backend/sdk.gen";
 import { PgcObject, Schema } from "../clients/backend/types.gen";
 
@@ -230,9 +231,7 @@ export function ObjectDetailsPage(): ReactElement {
       />
 
       {loading ? (
-        <div className="flex justify-center items-center h-64">
-          <p className="text-gray-300 text-lg">Loading...</p>
-        </div>
+        <Loading />
       ) : object ? (
         renderObjectDetails(object, schema)
       ) : (
diff --git a/src/pages/SearchResults.tsx b/src/pages/SearchResults.tsx
index 1d3af8a..4b88bb9 100644
--- a/src/pages/SearchResults.tsx
+++ b/src/pages/SearchResults.tsx
@@ -8,6 +8,7 @@ import { SearchPGCObject, backendClient } from "../clients/backend";
 import { SearchBar } from "../components/ui/searchbar";
 import { AladinViewer } from "../components/ui/aladin";
 import { Card, CardContent } from "../components/ui/card";
+import { Loading } from "../components/ui/loading";
 
 function objectClickHandler(
   navigate: NavigateFunction,
@@ -72,7 +73,7 @@ export function SearchResultsPage(): ReactElement {
       />
 
       {loading ? (
-        <p className="text-center">Loading...</p>
+        <Loading />
       ) : (
         <div className="grid grid-cols-1 gap-4">
           {results.length > 0 ? (
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 089814f..f4c6c6b 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -16,6 +16,7 @@ import { Button } from "../components/ui/button";
 import { CopyButton } from "../components/ui/copy-button";
 import { Badge } from "../components/ui/badge";
 import { Link } from "../components/ui/link";
+import { Loading } from "../components/ui/loading";
 import { getResource } from "../resources/resources";
 
 function renderBibliography(bib: Bibliography): ReactElement {
@@ -56,11 +57,7 @@ function renderUCD(ucd: CellPrimitive): ReactElement {
   const words: ReactElement[] = [];
 
   ucd.split(";").forEach((word, index) => {
-    words.push(
-      <Badge key={`${word}-${index}`}>
-        {word}
-      </Badge>,
-    );
+    words.push(<Badge key={`${word}-${index}`}>{word}</Badge>);
   });
 
   return (
@@ -309,9 +306,7 @@ export function TableDetailsPage(): ReactElement {
   return (
     <div className="p-8">
       {loading ? (
-        <div className="flex justify-center items-center h-64">
-          <p className="text-gray-300 text-lg">Loading...</p>
-        </div>
+        <Loading />
       ) : table ? (
         <div>
           <TableMeta tableName={tableName ?? ""} table={table} />

From a51d95451c71234da78a401236459b7e3aed21c2 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 17:02:45 +0300
Subject: [PATCH 07/16] animated loading

---
 src/components/ui/loading.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/loading.tsx b/src/components/ui/loading.tsx
index 071abd1..ce802e7 100644
--- a/src/components/ui/loading.tsx
+++ b/src/components/ui/loading.tsx
@@ -11,8 +11,17 @@ export function Loading({
 }: LoadingProps): ReactElement {
   return (
     <div className={`p-8 ${className}`}>
-      <div className="flex justify-center items-center h-64">
-        <p className="text-gray-300 text-lg">{message}</p>
+      <div className="flex flex-col justify-center items-center h-64 space-y-4">
+        <div className="relative">
+          <div className="w-8 h-8 border-4 border-gray-600 border-t-blue-500 rounded-full animate-spin"></div>
+          <div
+            className="absolute top-0 left-0 w-8 h-8 border-4 border-transparent border-t-blue-300 rounded-full animate-spin"
+            style={{ animationDirection: "reverse", animationDuration: "1.5s" }}
+          ></div>
+        </div>
+        <p className="text-gray-300 text-lg font-medium animate-pulse">
+          {message}
+        </p>
       </div>
     </div>
   );

From 3c863596433509979d9836cdfb8fdef648a73d00 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 17:14:26 +0300
Subject: [PATCH 08/16] add common error page component

---
 src/components/ui/error-page.tsx | 60 ++++++++++++++++++++++++++++++++
 src/pages/CrossmatchResults.tsx  | 37 ++++++++++----------
 src/pages/NotFound.tsx           | 25 +++++--------
 src/pages/ObjectDetails.tsx      | 19 ++++++----
 src/pages/SearchResults.tsx      |  9 ++++-
 src/pages/TableDetails.tsx       | 30 ++++++++++------
 6 files changed, 126 insertions(+), 54 deletions(-)
 create mode 100644 src/components/ui/error-page.tsx

diff --git a/src/components/ui/error-page.tsx b/src/components/ui/error-page.tsx
new file mode 100644
index 0000000..52a53df
--- /dev/null
+++ b/src/components/ui/error-page.tsx
@@ -0,0 +1,60 @@
+import { ReactElement, ReactNode } from "react";
+import { Button } from "./button";
+
+interface ErrorPageProps {
+  title: string;
+  message: string;
+  children?: ReactNode;
+  className?: string;
+  showLargeText?: boolean;
+}
+
+export function ErrorPage({
+  title,
+  message,
+  children,
+  className = "",
+  showLargeText = false,
+}: ErrorPageProps): ReactElement {
+  return (
+    <div
+      className={`min-h-screen flex items-center justify-center ${className}`}
+    >
+      <div className="max-w-md w-full text-center">
+        <div className="mb-8">
+          {showLargeText && <h1 className="text-9xl font-bold">404</h1>}
+          <h2 className="text-2xl font-semibold mb-4">{title}</h2>
+          <p className="text-gray-400 mb-8">{message}</p>
+        </div>
+
+        {children && (
+          <div className="flex justify-center gap-4">{children}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ErrorPageBackButton({
+  onClick,
+}: {
+  onClick: () => void;
+}): ReactElement {
+  return (
+    <Button onClick={onClick} className="px-6 py-3 text-base">
+      Back
+    </Button>
+  );
+}
+
+export function ErrorPageHomeButton({
+  onClick,
+}: {
+  onClick: () => void;
+}): ReactElement {
+  return (
+    <Button onClick={onClick} className="px-6 py-3 text-base">
+        Home
+    </Button>
+  );
+}
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 2a4bc79..b258987 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -18,6 +18,7 @@ import type {
 import { getResource } from "../resources/resources";
 import { Button } from "../components/ui/button";
 import { Loading } from "../components/ui/loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 
 export function CrossmatchResultsPage(): ReactElement {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -164,30 +165,28 @@ export function CrossmatchResultsPage(): ReactElement {
 
   if (error) {
     return (
-      <div className="p-8">
-        <div className="bg-red-900 border border-red-700 rounded p-4">
-          <h2 className="text-xl font-bold text-red-200 mb-2">Error</h2>
-          <p className="text-red-300">
-            {error.detail?.map((err: ValidationError) => err.msg).join(", ") ||
-              "An error occurred"}
-          </p>
-        </div>
-      </div>
+      <ErrorPage
+        title="Error"
+        message={
+          error.detail?.map((err: ValidationError) => err.msg).join(", ") ||
+          "An error occurred"
+        }
+        className="p-8"
+      >
+        <ErrorPageHomeButton onClick={() => navigate("/")} />
+      </ErrorPage>
     );
   }
 
   if (!tableName) {
     return (
-      <div className="p-8">
-        <div className="bg-yellow-900 border border-yellow-700 rounded p-4">
-          <h2 className="text-xl font-bold text-yellow-200 mb-2">
-            Missing Table Name
-          </h2>
-          <p className="text-yellow-300">
-            Please provide a table_name parameter.
-          </p>
-        </div>
-      </div>
+      <ErrorPage
+        title="Missing table name"
+        message="Please provide a table_name parameter."
+        className="p-8"
+      >
+        <ErrorPageHomeButton onClick={() => navigate("/")} />
+      </ErrorPage>
     );
   }
 
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 1fd06d5..742fb95 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -1,25 +1,16 @@
 import { useNavigate } from "react-router-dom";
-import { Button } from "../components/ui/button";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 
 export function NotFoundPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="max-w-md w-full text-center">
-        <div className="mb-8">
-          <h1 className="text-9xl font-bold">404</h1>
-          <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
-          <p className="text-gray-400 mb-8">
-            The page you're looking for doesn't exist or has been moved.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <Button onClick={() => navigate("/")} className="px-6 py-3 text-base">
-            Go Back Home
-          </Button>
-        </div>
-      </div>
-    </div>
+    <ErrorPage
+      title="Page Not Found"
+      message="The page you're looking for doesn't exist or has been moved."
+      showLargeText={true}
+    >
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
diff --git a/src/pages/ObjectDetails.tsx b/src/pages/ObjectDetails.tsx
index 51c5ad7..3b89a22 100644
--- a/src/pages/ObjectDetails.tsx
+++ b/src/pages/ObjectDetails.tsx
@@ -1,10 +1,14 @@
 import { ReactElement, useEffect, useState } from "react";
 import { NavigateFunction, useNavigate, useParams } from "react-router-dom";
 import { SearchBar } from "../components/ui/searchbar";
-import { Button } from "../components/ui/button";
 import { AladinViewer } from "../components/ui/aladin";
 import { CommonTable } from "../components/ui/common-table";
 import { Loading } from "../components/ui/loading";
+import {
+  ErrorPage,
+  ErrorPageBackButton,
+  ErrorPageHomeButton,
+} from "../components/ui/error-page";
 import { querySimpleApiV1QuerySimpleGet } from "../clients/backend/sdk.gen";
 import { PgcObject, Schema } from "../clients/backend/types.gen";
 
@@ -22,12 +26,13 @@ function searchHandler(navigate: NavigateFunction) {
 
 function renderNotFound(navigate: NavigateFunction) {
   return (
-    <div className="text-center">
-      <Button onClick={backToResultsHandler(navigate)} className="mb-4">
-        Back
-      </Button>
-      <p className="text-gray-300">Object not found.</p>
-    </div>
+    <ErrorPage
+      title="Object Not Found"
+      message="The requested object could not be found."
+    >
+      <ErrorPageBackButton onClick={backToResultsHandler(navigate)} />
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
 
diff --git a/src/pages/SearchResults.tsx b/src/pages/SearchResults.tsx
index 4b88bb9..599b59a 100644
--- a/src/pages/SearchResults.tsx
+++ b/src/pages/SearchResults.tsx
@@ -9,6 +9,7 @@ import { SearchBar } from "../components/ui/searchbar";
 import { AladinViewer } from "../components/ui/aladin";
 import { Card, CardContent } from "../components/ui/card";
 import { Loading } from "../components/ui/loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 
 function objectClickHandler(
   navigate: NavigateFunction,
@@ -132,7 +133,13 @@ export function SearchResultsPage(): ReactElement {
               </div>
             </>
           ) : (
-            <p className="text-center">No results found for "{query}"</p>
+            <ErrorPage
+              title="No Results Found"
+              message={`No results found for "${query}"`}
+              className="p-4"
+            >
+              <ErrorPageHomeButton onClick={() => navigate("/")} />
+            </ErrorPage>
           )}
         </div>
       )}
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index f4c6c6b..9e327a6 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -17,6 +17,7 @@ import { CopyButton } from "../components/ui/copy-button";
 import { Badge } from "../components/ui/badge";
 import { Link } from "../components/ui/link";
 import { Loading } from "../components/ui/loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 import { getResource } from "../resources/resources";
 
 function renderBibliography(bib: Bibliography): ReactElement {
@@ -251,19 +252,28 @@ function ColumnInfo(props: ColumnInfoProps): ReactElement {
   );
 }
 
-function renderNotFound(): ReactElement {
+function renderNotFound(navigate: (path: string) => void): ReactElement {
   return (
-    <div className="text-center">
-      <p className="text-gray-300">Table not found.</p>
-    </div>
+    <ErrorPage
+      title="Table Not Found"
+      message="The requested table could not be found."
+    >
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
 
-function renderError(error: HttpValidationError): ReactElement {
+function renderError(
+  error: HttpValidationError,
+  navigate: (path: string) => void,
+): ReactElement {
   return (
-    <div className="text-center">
-      <p className="text-gray-300">{error.detail?.toString()}</p>
-    </div>
+    <ErrorPage
+      title="Error"
+      message={error.detail?.toString() || "An error occurred"}
+    >
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
 
@@ -319,9 +329,9 @@ export function TableDetailsPage(): ReactElement {
           <ColumnInfo table={table} />
         </div>
       ) : error ? (
-        renderError(error)
+        renderError(error, navigate)
       ) : (
-        renderNotFound()
+        renderNotFound(navigate)
       )}
     </div>
   );

From b5da9e1dc4e1fc4e31f4b8df1bf8093554291dd8 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 17:22:40 +0300
Subject: [PATCH 09/16] apply filters button

---
 src/pages/CrossmatchResults.tsx | 35 +++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index b258987..e4bfad6 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -33,6 +33,14 @@ export function CrossmatchResultsPage(): ReactElement {
   const page = parseInt(searchParams.get("page") || "0");
   const pageSize = parseInt(searchParams.get("page_size") || "25");
 
+  const [localStatus, setLocalStatus] = useState<string>(status || "all");
+  const [localPageSize, setLocalPageSize] = useState<number>(pageSize);
+
+  useEffect(() => {
+    setLocalStatus(status || "all");
+    setLocalPageSize(pageSize);
+  }, [status, pageSize]);
+
   useEffect(() => {
     async function fetchData() {
       if (!tableName) {
@@ -85,21 +93,18 @@ export function CrossmatchResultsPage(): ReactElement {
     setSearchParams(newSearchParams);
   }
 
-  function handlePageSizeChange(newPageSize: number): void {
+  function applyFilters(): void {
     const newSearchParams = new URLSearchParams(searchParams);
-    newSearchParams.set("page_size", newPageSize.toString());
-    newSearchParams.set("page", "0");
-    setSearchParams(newSearchParams);
-  }
 
-  function handleStatusChange(newStatus: string): void {
-    const newSearchParams = new URLSearchParams(searchParams);
-    if (newStatus === "all") {
+    if (localStatus === "all") {
       newSearchParams.delete("status");
     } else {
-      newSearchParams.set("status", newStatus);
+      newSearchParams.set("status", localStatus);
     }
+
+    newSearchParams.set("page_size", localPageSize.toString());
     newSearchParams.set("page", "0");
+
     setSearchParams(newSearchParams);
   }
 
@@ -208,8 +213,8 @@ export function CrossmatchResultsPage(): ReactElement {
               { value: "existing", label: "Existing" },
             ]}
             defaultValue="all"
-            value={status || "all"}
-            onChange={handleStatusChange}
+            value={localStatus}
+            onChange={setLocalStatus}
           />
 
           <Dropdown
@@ -221,9 +226,13 @@ export function CrossmatchResultsPage(): ReactElement {
               { value: "100" },
             ]}
             defaultValue="25"
-            value={pageSize.toString()}
-            onChange={(value) => handlePageSizeChange(parseInt(value))}
+            value={localPageSize.toString()}
+            onChange={(value) => setLocalPageSize(parseInt(value))}
           />
+
+          <div className="flex items-end">
+            <Button onClick={applyFilters}>Apply</Button>
+          </div>
         </div>
       </div>
 

From e70a4200dcdfbc6f0456e10bb617eb608dc2c305 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 17:29:22 +0300
Subject: [PATCH 10/16] add text filter for table_name

---
 src/components/ui/text-filter.tsx | 32 +++++++++++++++++++++++++++++++
 src/pages/CrossmatchResults.tsx   | 28 +++++++++++++++++++++------
 2 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ui/text-filter.tsx

diff --git a/src/components/ui/text-filter.tsx b/src/components/ui/text-filter.tsx
new file mode 100644
index 0000000..543f104
--- /dev/null
+++ b/src/components/ui/text-filter.tsx
@@ -0,0 +1,32 @@
+import { ReactElement } from "react";
+
+interface TextFieldProps {
+  title: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: "text" | "email" | "password" | "number";
+}
+
+export function TextFilter({
+  title,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: TextFieldProps): ReactElement {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-300 mb-1">
+        {title}
+      </label>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      />
+    </div>
+  );
+}
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index e4bfad6..bba1201 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -7,6 +7,7 @@ import {
 } from "../components/ui/common-table";
 import { Badge } from "../components/ui/badge";
 import { Dropdown } from "../components/ui/dropdown";
+import { TextFilter } from "../components/ui/text-filter";
 import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
 import type {
   GetRecordsCrossmatchResponse,
@@ -35,11 +36,13 @@ export function CrossmatchResultsPage(): ReactElement {
 
   const [localStatus, setLocalStatus] = useState<string>(status || "all");
   const [localPageSize, setLocalPageSize] = useState<number>(pageSize);
+  const [localTableName, setLocalTableName] = useState<string>(tableName || "");
 
   useEffect(() => {
     setLocalStatus(status || "all");
     setLocalPageSize(pageSize);
-  }, [status, pageSize]);
+    setLocalTableName(tableName || "");
+  }, [status, pageSize, tableName]);
 
   useEffect(() => {
     async function fetchData() {
@@ -96,6 +99,12 @@ export function CrossmatchResultsPage(): ReactElement {
   function applyFilters(): void {
     const newSearchParams = new URLSearchParams(searchParams);
 
+    if (localTableName.trim()) {
+      newSearchParams.set("table_name", localTableName.trim());
+    } else {
+      newSearchParams.delete("table_name");
+    }
+
     if (localStatus === "all") {
       newSearchParams.delete("status");
     } else {
@@ -198,13 +207,20 @@ export function CrossmatchResultsPage(): ReactElement {
   return (
     <div className="p-8">
       <div className="mb-6">
-        <h1 className="text-3xl font-bold text-white mb-4">
-          Crossmatch Results for {tableName}
-        </h1>
+        <h2 className="text-3xl font-bold text-white mb-4">
+          Crossmatch results
+        </h2>
 
         <div className="flex gap-4 mb-4">
+          <TextFilter
+            title="Table name"
+            value={localTableName}
+            onChange={setLocalTableName}
+            placeholder="Enter table name"
+          />
+
           <Dropdown
-            title="Status Filter"
+            title="Status filter"
             options={[
               { value: "all", label: "All Statuses" },
               { value: "unprocessed", label: "Unprocessed" },
@@ -218,7 +234,7 @@ export function CrossmatchResultsPage(): ReactElement {
           />
 
           <Dropdown
-            title="Page Size"
+            title="Page size"
             options={[
               { value: "10" },
               { value: "25" },

From 55cd57c0dbabab7f827b9b5c9fc1d7e2c4630d28 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 18:06:27 +0300
Subject: [PATCH 11/16] rename dropdown

---
 .../ui/{dropdown.tsx => dropdown-filter.tsx}           | 10 +++++-----
 src/pages/CrossmatchResults.tsx                        |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/ui/{dropdown.tsx => dropdown-filter.tsx} (80%)

diff --git a/src/components/ui/dropdown.tsx b/src/components/ui/dropdown-filter.tsx
similarity index 80%
rename from src/components/ui/dropdown.tsx
rename to src/components/ui/dropdown-filter.tsx
index e456f4e..8235d6f 100644
--- a/src/components/ui/dropdown.tsx
+++ b/src/components/ui/dropdown-filter.tsx
@@ -1,24 +1,24 @@
 import { ReactElement } from "react";
 
-interface DropdownOption {
+interface DropdownFilterOption {
   value: string;
   label?: string;
 }
 
-interface DropdownProps {
+interface DropdownFilterProps {
   title: string;
-  options: DropdownOption[];
+  options: DropdownFilterOption[];
   defaultValue: string;
   value: string;
   onChange: (value: string) => void;
 }
 
-export function Dropdown({
+export function DropdownFilter({
   title,
   options,
   value,
   onChange,
-}: DropdownProps): ReactElement {
+}: DropdownFilterProps): ReactElement {
   return (
     <div>
       <label className="block text-sm font-medium text-gray-300 mb-1">
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index bba1201..13e169f 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -6,7 +6,7 @@ import {
   CellPrimitive,
 } from "../components/ui/common-table";
 import { Badge } from "../components/ui/badge";
-import { Dropdown } from "../components/ui/dropdown";
+import { DropdownFilter } from "../components/ui/dropdown-filter";
 import { TextFilter } from "../components/ui/text-filter";
 import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
 import type {
@@ -219,7 +219,7 @@ export function CrossmatchResultsPage(): ReactElement {
             placeholder="Enter table name"
           />
 
-          <Dropdown
+          <DropdownFilter
             title="Status filter"
             options={[
               { value: "all", label: "All Statuses" },
@@ -233,7 +233,7 @@ export function CrossmatchResultsPage(): ReactElement {
             onChange={setLocalStatus}
           />
 
-          <Dropdown
+          <DropdownFilter
             title="Page size"
             options={[
               { value: "10" },

From 1e7d116c6a697481af24aae168363f731e313a25 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 18:10:41 +0300
Subject: [PATCH 12/16] fix texts and widths

---
 src/components/ui/dropdown-filter.tsx | 2 +-
 src/components/ui/text-filter.tsx     | 2 +-
 src/pages/CrossmatchResults.tsx       | 2 +-
 src/pages/TableDetails.tsx            | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/dropdown-filter.tsx b/src/components/ui/dropdown-filter.tsx
index 8235d6f..52e48ee 100644
--- a/src/components/ui/dropdown-filter.tsx
+++ b/src/components/ui/dropdown-filter.tsx
@@ -27,7 +27,7 @@ export function DropdownFilter({
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white h-10 w-full"
       >
         {options.map((option) => (
           <option key={option.value} value={option.value}>
diff --git a/src/components/ui/text-filter.tsx b/src/components/ui/text-filter.tsx
index 543f104..60c5f0f 100644
--- a/src/components/ui/text-filter.tsx
+++ b/src/components/ui/text-filter.tsx
@@ -25,7 +25,7 @@ export function TextFilter({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-10 w-full"
       />
     </div>
   );
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 13e169f..7488303 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -254,7 +254,7 @@ export function CrossmatchResultsPage(): ReactElement {
 
       <CommonTable columns={columns} data={tableData} className="mb-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-xl font-bold">Crossmatch Records</h2>
+          <h2 className="text-xl font-bold">Crossmatch records</h2>
           <div className="text-sm text-gray-400">
             Showing {tableData.length} records
           </div>
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 9e327a6..58e07a4 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -145,7 +145,7 @@ function MarkingRules(props: MarkingRulesProps): ReactElement {
   return (
     <CommonTable columns={columns} data={values} className="pb-5">
       <h2 className="text-2xl font-bold">
-        Mapping of columns to catalog values for marking of records.
+        Mapping of columns to catalog values for marking of records
       </h2>
     </CommonTable>
   );
@@ -184,7 +184,7 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
 
   function handleViewCrossmatchResults(): void {
     props.navigate(
-      `/crossmatch?table_name=${encodeURIComponent(props.tableName)}`,
+      `/crossmatch?table_name=${encodeURIComponent(props.tableName)}&status=collided`,
     );
   }
 
@@ -193,7 +193,7 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
       <div className="flex justify-between items-center">
         <h2 className="text-2xl font-bold">Crossmatch Statistics</h2>
         <Button onClick={handleViewCrossmatchResults}>
-          View Crossmatch Results
+          View crossmatch results
         </Button>
       </div>
     </CommonTable>

From 5a8b1fc015e104b6b50907bf7422b5e98fbc556c Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 18:49:51 +0300
Subject: [PATCH 13/16] add link back to the table

---
 src/components/ui/link-button.tsx | 19 +++++++++++++++++++
 src/components/ui/link.tsx        |  5 ++++-
 src/pages/CrossmatchResults.tsx   | 18 +++++++++---------
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ui/link-button.tsx

diff --git a/src/components/ui/link-button.tsx b/src/components/ui/link-button.tsx
new file mode 100644
index 0000000..e09d040
--- /dev/null
+++ b/src/components/ui/link-button.tsx
@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from "react";
+import { MdOpenInNew } from "react-icons/md";
+import { Link } from "./link";
+
+interface LinkButtonProps {
+  children?: ReactNode;
+  to: string;
+}
+
+export function LinkButton(props: LinkButtonProps): ReactElement {
+  return (
+    <div className="font-mono relative flex items-center justify-between gap-2">
+      <div className="flex items-center">{props.children}</div>
+      <Link href={props.to} className="flex items-center">
+        <MdOpenInNew />
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index 7983a71..c006a30 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -3,16 +3,19 @@ import { ReactElement } from "react";
 interface LinkProps {
   children?: ReactElement | string;
   href: string;
+  className?: string;
 }
 
 export function Link(props: LinkProps): ReactElement {
   const content = props.children ?? props.href;
+  const baseClass = "text-green-500 hover:text-green-600 transition-colors";
+  const className = props.className ? `${baseClass} ${props.className}` : baseClass;
   return (
     <a
       target="_blank"
       rel="noopener noreferrer"
       href={props.href}
-      className="text-green-500 hover:text-green-600 transition-colors"
+      className={className}
     >
       {content}
     </a>
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 7488303..feb2147 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -20,6 +20,7 @@ import { getResource } from "../resources/resources";
 import { Button } from "../components/ui/button";
 import { Loading } from "../components/ui/loading";
 import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
+import { LinkButton } from "../components/ui/link-button";
 
 export function CrossmatchResultsPage(): ReactElement {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -212,13 +213,14 @@ export function CrossmatchResultsPage(): ReactElement {
         </h2>
 
         <div className="flex gap-4 mb-4">
-          <TextFilter
-            title="Table name"
-            value={localTableName}
-            onChange={setLocalTableName}
-            placeholder="Enter table name"
-          />
-
+          <LinkButton to={`/table/${localTableName.trim()}`}>
+            <TextFilter
+              title="Table name"
+              value={localTableName}
+              onChange={setLocalTableName}
+              placeholder="Enter table name"
+            />
+          </LinkButton>
           <DropdownFilter
             title="Status filter"
             options={[
@@ -232,7 +234,6 @@ export function CrossmatchResultsPage(): ReactElement {
             value={localStatus}
             onChange={setLocalStatus}
           />
-
           <DropdownFilter
             title="Page size"
             options={[
@@ -245,7 +246,6 @@ export function CrossmatchResultsPage(): ReactElement {
             value={localPageSize.toString()}
             onChange={(value) => setLocalPageSize(parseInt(value))}
           />
-
           <div className="flex items-end">
             <Button onClick={applyFilters}>Apply</Button>
           </div>

From 72b33ffe9c9751ae5e1d334869efa2f1ea6f9472 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 18:53:38 +0300
Subject: [PATCH 14/16] add onEnter to the text field

---
 src/components/ui/text-filter.tsx | 7 +++++++
 src/pages/CrossmatchResults.tsx   | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/components/ui/text-filter.tsx b/src/components/ui/text-filter.tsx
index 60c5f0f..c5e7adb 100644
--- a/src/components/ui/text-filter.tsx
+++ b/src/components/ui/text-filter.tsx
@@ -6,6 +6,7 @@ interface TextFieldProps {
   onChange: (value: string) => void;
   placeholder?: string;
   type?: "text" | "email" | "password" | "number";
+  onEnter?: () => void;
 }
 
 export function TextFilter({
@@ -14,6 +15,7 @@ export function TextFilter({
   onChange,
   placeholder,
   type = "text",
+  onEnter,
 }: TextFieldProps): ReactElement {
   return (
     <div>
@@ -24,6 +26,11 @@ export function TextFilter({
         type={type}
         value={value}
         onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && onEnter) {
+            onEnter();
+          }
+        }}
         placeholder={placeholder}
         className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-10 w-full"
       />
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index feb2147..281606f 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -219,6 +219,7 @@ export function CrossmatchResultsPage(): ReactElement {
               value={localTableName}
               onChange={setLocalTableName}
               placeholder="Enter table name"
+              onEnter={applyFilters}
             />
           </LinkButton>
           <DropdownFilter

From 034b9dbc0a2af4b9b0d5acabf9cd7e678f87db14 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 19:00:10 +0300
Subject: [PATCH 15/16] ctrl click on the button

---
 src/components/ui/button.tsx    |  4 ++--
 src/pages/CrossmatchResults.tsx |  4 +---
 src/pages/ObjectDetails.tsx     |  8 ++++----
 src/pages/TableDetails.tsx      | 12 ++++++++----
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 83dded8..9151382 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import classNames from "classnames";
 
 interface ButtonProps {
   children: React.ReactNode;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent) => void;
   className?: string;
   type?: "button" | "submit" | "reset";
   disabled?: boolean;
@@ -13,7 +13,7 @@ export function Button(props: ButtonProps): ReactElement {
   return (
     <button
       type={props.type}
-      onClick={props.onClick}
+      onClick={(event) => props.onClick?.(event)}
       disabled={props.disabled}
       className={classNames(
         "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white cursor-pointer",
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
index 281606f..88a5a0b 100644
--- a/src/pages/CrossmatchResults.tsx
+++ b/src/pages/CrossmatchResults.tsx
@@ -208,9 +208,7 @@ export function CrossmatchResultsPage(): ReactElement {
   return (
     <div className="p-8">
       <div className="mb-6">
-        <h2 className="text-3xl font-bold text-white mb-4">
-          Crossmatch results
-        </h2>
+        <h2 className="text-3xl font-bold mb-4">Crossmatch results</h2>
 
         <div className="flex gap-4 mb-4">
           <LinkButton to={`/table/${localTableName.trim()}`}>
diff --git a/src/pages/ObjectDetails.tsx b/src/pages/ObjectDetails.tsx
index 3b89a22..e2ca63d 100644
--- a/src/pages/ObjectDetails.tsx
+++ b/src/pages/ObjectDetails.tsx
@@ -152,7 +152,7 @@ function renderObjectDetails(
           />
         )}
         <div className="flex-1">
-          <h2 className="text-2xl font-bold text-white mb-2">
+          <h2 className="text-2xl font-bold mb-2">
             {object.catalogs?.designation?.name || `PGC ${object.pgc}`}
           </h2>
           <p className="text-gray-300">PGC: {object.pgc}</p>
@@ -161,21 +161,21 @@ function renderObjectDetails(
 
       {object.catalogs?.coordinates && (
         <CommonTable columns={coordinatesColumns} data={coordinatesData}>
-          <h2 className="text-xl font-bold text-white">Coordinates</h2>
+          <h2 className="text-xl font-bold">Coordinates</h2>
           <p className="text-gray-300">Celestial coordinates of the object</p>
         </CommonTable>
       )}
 
       {object.catalogs?.redshift && (
         <CommonTable columns={redshiftColumns} data={redshiftData}>
-          <h2 className="text-xl font-bold text-white">Redshift</h2>
+          <h2 className="text-xl font-bold">Redshift</h2>
           <p className="text-gray-300">Redshift measurements</p>
         </CommonTable>
       )}
 
       {object.catalogs?.velocity && (
         <CommonTable columns={velocityColumns} data={velocityData}>
-          <h2 className="text-xl font-bold text-white">Velocity</h2>
+          <h2 className="text-xl font-bold">Velocity</h2>
           <p className="text-gray-300">
             Velocity measurements with respect to different apexes
           </p>
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 58e07a4..75c1b53 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -182,10 +182,14 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
     return <div></div>;
   }
 
-  function handleViewCrossmatchResults(): void {
-    props.navigate(
-      `/crossmatch?table_name=${encodeURIComponent(props.tableName)}&status=collided`,
-    );
+  function handleViewCrossmatchResults(event: React.MouseEvent): void {
+    const url = `/crossmatch?table_name=${encodeURIComponent(props.tableName)}&status=collided`;
+
+    if (event.ctrlKey || event.metaKey) {
+      window.open(url, "_blank");
+    } else {
+      props.navigate(url);
+    }
   }
 
   return (

From df63f8f026ab103d96b2aca857140f7642ecebeb Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sun, 14 Sep 2025 19:01:57 +0300
Subject: [PATCH 16/16] style

---
 src/assets/texts.json            | 2 +-
 src/components/ui/error-page.tsx | 2 +-
 src/components/ui/link.tsx       | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/assets/texts.json b/src/assets/texts.json
index 24bb09d..2a48371 100644
--- a/src/assets/texts.json
+++ b/src/assets/texts.json
@@ -8,4 +8,4 @@
     "crossmatch.status.collided": "Collided",
     "crossmatch.status.existing": "Existing"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/error-page.tsx b/src/components/ui/error-page.tsx
index 52a53df..bf57a8a 100644
--- a/src/components/ui/error-page.tsx
+++ b/src/components/ui/error-page.tsx
@@ -54,7 +54,7 @@ export function ErrorPageHomeButton({
 }): ReactElement {
   return (
     <Button onClick={onClick} className="px-6 py-3 text-base">
-        Home
+      Home
     </Button>
   );
 }
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index c006a30..7999d88 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -9,7 +9,9 @@ interface LinkProps {
 export function Link(props: LinkProps): ReactElement {
   const content = props.children ?? props.href;
   const baseClass = "text-green-500 hover:text-green-600 transition-colors";
-  const className = props.className ? `${baseClass} ${props.className}` : baseClass;
+  const className = props.className
+    ? `${baseClass} ${props.className}`
+    : baseClass;
   return (
     <a
       target="_blank"