feat: swagger link in appbar

src/client/Root.tsx

@@ -5,6 +5,7 @@ import {
   Link,
   Stack,
   Toolbar,
+  Typography,
 } from "@mui/material";
 import {
   Outlet,
@@ -13,6 +14,7 @@ import {
   useParams,
 } from "react-router";
 import "./theme";
+import { serverRoot } from "./client";
 
 export function Root() {
   const location = useLocation();
@@ -23,22 +25,28 @@ export function Root() {
       <Stack spacing={2}>
         <AppBar position="static">
           <Toolbar>
+            <Typography variant="h6" component="h1" sx={{ flexGrow: 1 }}>
+              Game Logger
+            </Typography>
+            <Link
+              variant="appbar"
+              href={serverRoot + "/swagger-ui"}
+              target="_blank"
+            >
+              Swagger UI
+            </Link>
+          </Toolbar>
+        </AppBar>
         <Breadcrumbs aria-label="breadcrumb">
-              <Link variant="breadcrumb" component={RouterLink} to="/">
+          <Link component={RouterLink} to="/">
             Sessions
           </Link>
           {location.pathname.includes("/session/") && (
-                <Link
+            <Link component={RouterLink} to={`/session/${params.sessionId}`}>
-                  variant="breadcrumb"
-                  component={RouterLink}
-                  to={`/session/${params.sessionId}`}
-                >
               {`${params.sessionId}`}
             </Link>
           )}
         </Breadcrumbs>
-          </Toolbar>
-        </AppBar>
         <Outlet />
       </Stack>
     </Container>

src/client/api.ts

@@ -1,10 +0,0 @@
-const serverRoot =
-  import.meta.env.MODE === "development"
-    ? "http://localhost:9283"
-    : window.location.protocol + "//" + window.location.host;
-
-const getSessions = () =>
-  fetch(`${serverRoot}/api/get-sessions`)
-    .then((x) => x.json())
-    .then(console.log)
-    .catch(console.error);

src/client/client.ts

@@ -2,7 +2,7 @@
 import { initQueryClient } from "@ts-rest/react-query";
 import { contract } from "../common/contract";
 
-const serverRoot =
+export const serverRoot =
   import.meta.env.MODE === "development"
     ? "http://localhost:9283"
     : window.location.protocol + "//" + window.location.host;

src/client/theme.ts

@@ -1,15 +1,9 @@
 import { createTheme } from "@mui/material/styles";
 import { red } from "@mui/material/colors";
-import { TypographyOwnProps, TypographyPropsVariantOverrides } from "@mui/material";
-import { OverridableStringUnion} from "@mui/types"
-import { Variant } from "@mui/material/styles/createTypography";
 
 declare module "@mui/material/Typography" {
-  // interface ButtonPropsVariantOverrides {
-  //   dashed: true;
-  // }
   interface TypographyPropsVariantOverrides {
-    breadcrumb: true;
+    appbar: true;
   }
 }
 
@@ -35,7 +29,7 @@ const theme = createTheme({
         root: {
           variants: [
             {
-              props: { variant: "breadcrumb" },
+              props: { variant: "appbar" },
               style: {
                 color: "#fff",
               },