feat: UI cleanup and short GUIDs

src/client/Root.tsx

@@ -2,8 +2,10 @@ import {
   AppBar,
   Breadcrumbs,
   Container,
+  FormControlLabel,
   Link,
   Stack,
+  Switch,
   Toolbar,
   Typography,
 } from "@mui/material";
@@ -15,11 +17,23 @@ import {
 } from "react-router";
 import "./theme";
 import { serverRoot } from "./client";
+import { useAtom } from "jotai";
+import { shortGuidsAtom } from "./configuration";
+import { ChangeEvent, useCallback } from "react";
 
 export function Root() {
   const location = useLocation();
   const params = useParams();
 
+  const [shortGuids, setShortGuids] = useAtom(shortGuidsAtom);
+
+  const handleShortGuidsOnChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setShortGuids(e.target.checked);
+    },
+    [setShortGuids]
+  );
+
   return (
     <Container maxWidth="lg">
       <Stack spacing={2}>
@@ -28,6 +42,17 @@ export function Root() {
             <Typography variant="h6" component="h1" sx={{ flexGrow: 1 }}>
               Game Logger
             </Typography>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={shortGuids}
+                  onChange={handleShortGuidsOnChange}
+                  aria-label="short guids switch"
+                  color="secondary"
+                />
+              }
+              label={"Use short GUIDs"}
+            />
             <Link
               variant="appbar"
               href={serverRoot + "/swagger-ui"}

src/client/Sessions.tsx

@@ -11,6 +11,10 @@ import { GetSessionsResponse } from "../common/contract";
 import { format, formatDuration, interval, intervalToDuration } from "date-fns";
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router";
+import { Typography } from "@mui/material";
+import { useAtom } from "jotai";
+import { shortGuidsAtom } from "./configuration";
+import { formatGuid } from "./guid";
 
 export function Sessions() {
   const [paginationState, setPaginationState] = useState<MRT_PaginationState>({
@@ -73,27 +77,54 @@ function SessionsTable({
   isRefetching: boolean;
   columnFilters: MRT_ColumnFiltersState;
 }) {
+  const [shortGuids] = useAtom(shortGuidsAtom);
+
   const columns = useMemo<MRT_ColumnDef<GetSessionsResponse["sessions"][0]>[]>(
     () => [
       {
         accessorKey: "save_id",
         header: "Save ID",
+        grow: false,
+        Cell: ({
+          row: {
+            original: { save_id },
+          },
+        }) => <Typography variant="body2">{formatGuid(save_id, shortGuids)}</Typography>,
       },
       {
         accessorKey: "id",
         header: "ID",
+        grow: true,
+        Cell: ({
+          row: {
+            original: { id },
+          },
+        }) => <Typography variant="body2">{formatGuid(id, shortGuids)}</Typography>,
       },
       {
         accessorKey: "game_name",
         header: "Game Name",
+        grow: false,
+        Cell: ({
+          row: {
+            original: { game_name },
+          },
+        }) => <Typography variant="body1">{game_name}</Typography>,
       },
       {
         accessorKey: "version",
         header: "Version",
+        grow: false,
+        Cell: ({
+          row: {
+            original: { version },
+          },
+        }) => <Typography variant="body2">{version}</Typography>,
       },
       {
         accessorKey: "time",
         header: "Time",
+        grow: true,
         Cell: ({ row }) => {
           const rangeInterval = interval(
             row.original.start_time,
@@ -104,19 +135,23 @@ function SessionsTable({
           const formattedDuration = formatDuration(duration);
           return (
             <span>
-              {formattedStartTime}
-              <br />({formattedDuration || "very quick"})
+              <Typography variant="body2">{formattedStartTime}</Typography>
+              <Typography variant="body2" color="textSecondary">
+                {formattedDuration || "very quick"}, {row.original.num_events}{" "}
+                events
+              </Typography>
             </span>
           );
         },
       },
     ],
-    []
+    [shortGuids]
   );
 
   const navigate = useNavigate();
 
   const table = useMaterialReactTable({
+    layoutMode: "grid",
     data: sessions,
     columns,
     muiTableBodyRowProps: ({ row }) => ({

src/client/configuration.ts

@@ -0,0 +1,3 @@
+import {atom} from "jotai";
+
+export const shortGuidsAtom = atom(true);

src/client/guid.ts

@@ -0,0 +1,7 @@
+export function formatGuid(guid: string, shortGuid: boolean) {
+  if (shortGuid) {
+    return guid.substring(0, 4) + "-" + guid.substring(guid.length - 4);
+  } else {
+    return guid;
+  }
+}

src/client/theme.ts

@@ -7,17 +7,15 @@ declare module "@mui/material/Typography" {
   }
 }
 
-// const x: LinkPropsVariantOverrides;
-
 // A custom theme for this app
 const theme = createTheme({
   cssVariables: true,
   palette: {
     primary: {
-      main: "#556cd6",
+      main: "#735DA5",
     },
     secondary: {
-      main: "#19857b",
+      main: "#D3C5E5",
     },
     error: {
       main: red.A400,