add react router

Author: tvarney13

internal/dev_server/ui/dist/index.html

@@ -22,6 +22,7 @@
     "lodash": "4.17.21",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-router": "7.7.1",
     "react-window": "1.8.10"
   },
   "devDependencies": {

internal/dev_server/ui/package-lock.json

@@ -1,14 +1,12 @@
 import './App.css';
-import { useState } from 'react';
+import { Routes, Route, Navigate } from 'react-router';
 import { Box } from '@launchpad-ui/core';
 import FlagsButton from './FlagsButton.tsx';
 import EventsButton from './EventsButton.tsx';
 import FlagsPage from './FlagsPage.tsx';
 import EventsPage from './EventsPage.tsx';
 
 function App() {
-  const [mode, setMode] = useState<'flags' | 'events'>('flags');
-
   return (
     <div
       style={{
@@ -28,12 +26,15 @@ function App() {
         padding="2rem"
       >
         <Box display="flex" gap="10px" justifyContent="flex-start" width="100%">
-          <FlagsButton onPress={() => { setMode('flags'); }} />
-          <EventsButton onPress={() => { setMode('events'); }} />
+          <FlagsButton />
+          <EventsButton />
         </Box>
         <Box padding="1rem" width="100%">
-          {mode === 'flags' && <FlagsPage />}
-          {mode === 'events' && <EventsPage />}
+          <Routes>
+            <Route path="/" element={<Navigate to="/ui" replace />} />
+            <Route path="/ui" element={<FlagsPage />} />
+            <Route path="/events" element={<EventsPage />} />
+          </Routes>
         </Box>
       </Box>
     </div>

internal/dev_server/ui/package.json

@@ -5,17 +5,19 @@ import {
 } from '@launchpad-ui/components';
 import { Icon } from '@launchpad-ui/icons';
 import { Inline } from '@launchpad-ui/core';
+import { useNavigate, useLocation } from 'react-router';
 
-type Props = {
-  onPress: () => void;
-};
+const EventsButton = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isActive = location.pathname === '/events';
 
-const EventsButton = ({
-  onPress,
-}: Props) => {
   return (
     <TooltipTrigger>
-      <Button onPress={onPress}>
+      <Button 
+        onPress={() => navigate('/events')}
+        variant={isActive ? 'primary' : 'default'}
+      >
         <div>
           <Inline gap="1">
             <Icon name="play" size="small" />

internal/dev_server/ui/src/App.tsx

@@ -5,17 +5,19 @@ import {
 } from '@launchpad-ui/components';
 import { Icon } from '@launchpad-ui/icons';
 import { Inline } from '@launchpad-ui/core';
+import { useNavigate, useLocation } from 'react-router';
 
-type Props = {
-  onPress: () => void;
-};
+const FlagsButton = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isActive = location.pathname === '/ui';
 
-const FlagsButton = ({
-  onPress,
-}: Props) => {
   return (
     <TooltipTrigger>
-      <Button onPress={onPress}>
+      <Button 
+        onPress={() => navigate('/ui')}
+        variant={isActive ? 'primary' : 'default'}
+      >
         <div>
           <Inline gap="1">
             <Icon name="flag" size="small" />

internal/dev_server/ui/src/EventsButton.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router';
 import App from './App.tsx';
 import { IconProvider } from './IconProvider.tsx';
 import { ToastContainer } from '@launchpad-ui/components';
@@ -27,10 +28,12 @@ const Root = () => {
 
   return (
     <React.StrictMode>
-      <IconProvider>
-        <App />
-        <ToastContainer />
-      </IconProvider>
+      <BrowserRouter>
+        <IconProvider>
+          <App />
+          <ToastContainer />
+        </IconProvider>
+      </BrowserRouter>
     </React.StrictMode>
   );
 };