feat: group jobs by their versions

package.json

@@ -52,8 +52,8 @@
     "@rjsf/utils": "5.24.10",
     "@rjsf/validator-ajv8": "5.24.10",
     "@sentry/nextjs": "8.55.0",
-    "@squonk/account-server-client": "4.2.0-rc.8",
-    "@squonk/data-manager-client": "4.0.0-rc.1",
+    "@squonk/account-server-client": "4.2.1",
+    "@squonk/data-manager-client": "4.1.0",
     "@squonk/mui-theme": "5.0.0",
     "@squonk/sdf-parser": "1.3.1",
     "@tanstack/match-sorter-utils": "8.19.4",
@@ -67,6 +67,7 @@
     "@types/prismjs": "1.26.5",
     "@types/react": "19.1.4",
     "@types/react-plotly.js": "2.6.3",
+    "@types/semver": "^7.7.0",
     "axios": "1.9.0",
     "dayjs": "1.11.13",
     "filesize": "10.1.6",
@@ -93,6 +94,7 @@
     "react-dropzone": "14.3.8",
     "react-plotly.js": "2.6.0",
     "react-use-websocket": "4.13.0",
+    "semver": "^7.7.2",
     "sharp": "0.34.1",
     "typescript": "5.8.3",
     "use-immer": "0.11.0",

src/components/BaseCard.tsx

@@ -86,14 +86,13 @@ export const BaseCard = ({
         />
       )}
       <CardContent>{children}</CardContent>
-      <CardActions disableSpacing sx={{ justifyContent: "right" }}>
+      <CardActions disableSpacing sx={{ justifyContent: "right", display: "flex", alignItems: "flex-start", gap: 1 }}>
         {/* ? should this be a functionCall() or a <ReactElement />
         or should this be separate props with a union and one a never type */}
         {typeof actions === "function" ? actions({ setExpanded }) : actions}
         {collapsed !== undefined && (
           <IconButton
             aria-expanded={expanded}
-            size="large"
             sx={(theme) => ({
               marginLeft: "auto",
               transform: `rotate(${expanded ? 180 : 0}deg)`,

src/components/SearchTextField.tsx

@@ -1,21 +1,30 @@
+import { forwardRef } from "react";
+
 import { SearchRounded as SearchRoundedIcon } from "@mui/icons-material";
 import { InputAdornment, TextField, type TextFieldProps } from "@mui/material";
 
+import { getSearchShortcut } from "../utils/platform";
+
 /**
- * MuiTextField with a search icon at the end
+ * MuiTextField with a search icon at the end and platform-specific keyboard shortcut in label
  */
-export const SearchTextField = (TextFieldProps: TextFieldProps) => (
-  <TextField
-    label="Search"
-    {...TextFieldProps}
-    slotProps={{
-      input: {
-        endAdornment: (
-          <InputAdornment position="end">
-            <SearchRoundedIcon />
-          </InputAdornment>
-        ),
-      },
-    }}
-  />
+export const SearchTextField = forwardRef<HTMLDivElement, TextFieldProps>(
+  (TextFieldProps, ref) => (
+    <TextField
+      label={`Search (${getSearchShortcut()})`}
+      ref={ref}
+      {...TextFieldProps}
+      slotProps={{
+        input: {
+          endAdornment: (
+            <InputAdornment position="end">
+              <SearchRoundedIcon />
+            </InputAdornment>
+          ),
+        },
+      }}
+    />
+  ),
 );
+
+SearchTextField.displayName = "SearchTextField";