feat: add vertical navigation

package.json

@@ -23,6 +23,7 @@
     "@ag-grid-community/csv-export": "^32.2.0",
     "@ag-grid-community/react": "^32.2.0",
     "@ag-grid-community/styles": "^32.2.0",
+    "@floating-ui/react": "^0.27.15",
     "@fontsource/inter-tight": "^5.2.5",
     "@fontsource/roboto-mono": "^5.1.0",
     "@nivo/core": "^0.88.0",
@@ -53,6 +54,7 @@
     "react-intersection-observer": "^9.13.1",
     "react-use": "^17.5.1",
     "react-virtualized-auto-sizer": "^1.0.24",
+    "react-virtuoso": "^4.13.0",
     "uplot": "^1.6.32",
     "use-debounce": "^10.0.3",
     "zod": "^3.23.8"

src/App.tsx

@@ -33,12 +33,7 @@ export default function App() {
   );
 
   return (
-    <Theme
-      className="app"
-      appearance="dark"
-      ref={setRefAndColors}
-      scaling="90%"
-    >
+    <Theme id="app" appearance="dark" ref={setRefAndColors} scaling="90%">
       <ConnectionProvider>
         <RouterProvider router={router} />
       </ConnectionProvider>

src/app.css

@@ -1,4 +1,4 @@
-.app {
+#app {
   /* radix tokens */
   --color-background: #070b14;
   --default-font-family: "Inter Tight", sans-serif;
@@ -13,8 +13,7 @@
   --green-live: #3cff73;
 
   --header-row-height: 34px;
-  /* headder height + epoch bar height + 10 padding top/bottom */
-  --header-height: 121px;
+  --header-height: 55px;
 
   font-variant-numeric: tabular-nums;
 }