#41: add records page

src/App.tsx

@@ -5,6 +5,7 @@ import { ObjectDetailsPage } from "./pages/ObjectDetails";
 import { NotFoundPage } from "./pages/NotFound";
 import { TableDetailsPage } from "./pages/TableDetails";
 import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
+import { RecordsPage } from "./pages/Records";
 import { RecordCrossmatchDetailsPage } from "./pages/RecordCrossmatchDetails";
 import { TablesPage } from "./pages/Tables";
 import { Layout } from "./components/ui/Layout";
@@ -37,6 +38,7 @@ function App() {
           <Route path="/table/:tableName" element={<TableDetailsPage />} />
           <Route path="/tables" element={<TablesPage />} />
           <Route path="/crossmatch" element={<CrossmatchResultsPage />} />
+          <Route path="/records" element={<RecordsPage />} />
           <Route
             path="/records/:recordId/crossmatch"
             element={

src/assets/texts.json

@@ -7,6 +7,7 @@
     "crossmatch.status.new": "New",
     "crossmatch.status.collided": "Collided",
     "crossmatch.status.existing": "Existing",
+    "crossmatch.triage.unprocessed": "Unprocessed",
     "crossmatch.triage.pending": "Pending",
     "crossmatch.triage.resolved": "Resolved"
   }

src/components/core/Hint.tsx

@@ -2,24 +2,49 @@ import { Tooltip } from "flowbite-react";
 import { ReactElement, ReactNode } from "react";
 import { MdHelpOutline } from "react-icons/md";
 
+export type HintPosition = "top" | "left" | "right" | "bottom";
+
 interface HintProps {
   children: ReactElement;
   hintContent: ReactNode;
+  position?: HintPosition;
   className?: string;
+  trigger?: "icon" | "child";
 }
 
+const tooltipClassName = "bg-gray-600 z-10 border-1 max-w-xl";
+const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" };
+
 export function Hint(props: HintProps): ReactElement {
+  const placement = props.position ?? "top";
+  const trigger = props.trigger ?? "icon";
+
+  if (trigger === "child") {
+    return (
+      <Tooltip
+        content={props.hintContent}
+        arrow={false}
+        placement={placement}
+        className={tooltipClassName}
+        theme={tooltipTheme}
+      >
+        {props.children}
+      </Tooltip>
+    );
+  }
+
   return (
     <div
-      className={`flex items-center justify-center gap-2 ${props.className}`}
+      className={`flex items-center justify-center gap-2 ${props.className ?? ""}`}
     >
       <div>{props.children}</div>
       <div>
         <Tooltip
           content={props.hintContent}
           arrow={false}
-          placement="top"
-          className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1 max-w-xl"
+          placement={placement}
+          className={tooltipClassName}
+          theme={tooltipTheme}
         >
           <MdHelpOutline />
         </Tooltip>

src/components/ui/Navbar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { NavLink } from "react-router-dom";
-import { Tooltip } from "flowbite-react";
 import { MdInfo, MdSearch, MdTableChart } from "react-icons/md";
+import { Hint } from "../core/Hint";
 import { Link } from "../core/Link";
 
 const navItems = [
@@ -34,12 +34,11 @@ export function Navbar() {
     <>
       <nav className="fixed left-0 top-0 h-screen w-12 flex flex-col items-center pt-4 pb-4 gap-2 bg-[#1a1a1a] z-20">
         {navItems.map((item) => (
-          <Tooltip
+          <Hint
             key={item.to}
-            content={item.label}
-            placement="right"
-            arrow={false}
-            className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1"
+            hintContent={item.label}
+            position="right"
+            trigger="child"
           >
             <NavLink
               to={item.to}
@@ -54,7 +53,7 @@ export function Navbar() {
             >
               {item.icon}
             </NavLink>
-          </Tooltip>
+          </Hint>
         ))}
 
         <div className="mt-auto">