feat: Integrate Material UI theme provider and enhance UI components

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview",
     "test": "vitest",
     "server": "node server.js --dev",
-    "dev": "concurrently \"npm start\" \"npm run server\"",
+    "dev": "concurrently \"npm start\" \"node --watch server.js --dev\"",
     "build-image": "node scripts/build-image.js"
   },
   "engines": {

src/App.jsx

@@ -1,12 +1,9 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import {
-  ThemeProvider,
-  createTheme,
   CssBaseline,
   Box,
-  Container,
+  useColorScheme,
 } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import MainPage from "./components/MainPage";
@@ -78,19 +75,14 @@ function App() {
     "x-api-key": apiKey,
   });
 
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const { setMode } = useColorScheme();
 
-  const muiTheme = useMemo(() => {
-    return createTheme({
-      cssVariables: true,
-      colorSchemes: {
-        light: true,
-        dark: true,
-      },
-    });
-  }, []);
   // Load sample data from API on startup and setup periodic state checking
   useEffect(() => {
+    // Sync initial theme from localStorage with MUI color scheme
+    const initialMode = theme === 'auto' ? 'system' : theme;
+    setMode(initialMode);
+    
     loadSampleData();
 
     // Check for state changes every 5 seconds
@@ -156,20 +148,29 @@ function App() {
 
   const handleThemeChange = (newTheme) => {
     setTheme(newTheme);
+    const muiMode = newTheme === "auto" ? "system" : newTheme;
+    setMode(muiMode);
+    localStorage.setItem("theme", newTheme);
   };
 
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
   };
 
+  const handleShellTypeChange = (newShellType) => {
+    setShellType(newShellType);
+    localStorage.setItem("jmespath-shell-type", newShellType);
+  };
+
   return (
-    <ThemeProvider theme={muiTheme}>
+    <>
       <CssBaseline />
       <Box
         sx={{
           display: "flex",
           flexDirection: "column",
-          minHeight: "100vh",
+          height: "100vh",
+          overflow: "hidden",
           bgcolor: "background.default",
         }}
       >
@@ -188,6 +189,7 @@ function App() {
             display: "flex",
             flexDirection: "column",
             minHeight: 0,
+            height: "100%", // Force height for children
           }}
         >
           {currentPage === "main" ? (
@@ -205,14 +207,14 @@ function App() {
               apiKey={apiKey}
               onRegenerateApiKey={regenerateApiKey}
               shellType={shellType}
-              onShellTypeChange={setShellType}
+              onShellTypeChange={handleShellTypeChange}
             />
           )}
         </Box>
 
         <Footer />
       </Box>
-    </ThemeProvider>
+    </>
   );
 }
 

src/components/ApiKeyPage.jsx

@@ -40,12 +40,11 @@ function CodeBlock({ code }) {
           p: 2,
           pr: 6,
           bgcolor: "action.hover",
-          fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+          fontFamily: "'Noto Sans Mono', monospace",
           fontSize: "0.85rem",
           whiteSpace: "pre-wrap",
           wordBreak: "break-all",
           position: "relative",
-          borderRadius: 2,
           borderColor: "divider",
         }}
       >
@@ -92,10 +91,10 @@ function ApiKeyPage({
   };
 
   return (
-    <Box component="main" sx={{ flexGrow: 1, py: 4, px: 2 }}>
+    <Box sx={{ flexGrow: 1, py: 4, px: 2 }}>
       <Grid container justifyContent="center">
         <Grid size={{ xs: 12, md: 8, lg: 6 }}>
-          <Paper elevation={1} sx={{ p: { xs: 3, md: 5 }, borderRadius: 4, bgcolor: "background.paper", border: 1, borderColor: "divider" }}>
+          <Paper elevation={1} sx={{ p: { xs: 3, md: 5 }, bgcolor: "background.paper", border: 1, borderColor: "divider" }}>
             <Typography variant="h5" gutterBottom sx={{ mb: 4, fontWeight: 700, display: "flex", alignItems: "center", gap: 1.5, color: "text.primary" }}>
               <KeyIcon color="primary" /> API Key Management
             </Typography>
@@ -111,11 +110,11 @@ function ApiKeyPage({
                   slotProps={{
                     input: {
                       readOnly: true,
-                      style: { fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: "0.9rem" },
+                      style: { fontFamily: "'Noto Sans Mono', monospace", fontSize: "0.9rem" },
                     },
                   }}
                   variant="outlined"
-                  sx={{ "& .MuiOutlinedInput-root": { borderRadius: 4, bgcolor: "background.paper" } }}
+                  sx={{ "& .MuiOutlinedInput-root": { bgcolor: "background.paper" } }}
                 />
                 <Tooltip title="Copy API Key">
                   <IconButton
@@ -156,7 +155,8 @@ function ApiKeyPage({
                   gap: 2,
                 }}
               >
-                <Typography variant="h6" fontWeight="600" color="text.primary">📡 Remote Upload API</Typography>
+                <Typography variant="h6" fontWeight="600" color="text.primary">Remote Upload API</Typography>
+
                 <ToggleButtonGroup
                   size="small"
                   value={shellType}

src/components/Footer.jsx

@@ -7,8 +7,7 @@ function Footer() {
     <Box
       component="footer"
       sx={{
-        py: 2,
+        py: 1,
-        mt: 2,
         borderTop: 1,
         borderColor: "divider",
         bgcolor: "background.paper",

src/components/MainPage.jsx

@@ -5,7 +5,6 @@ import {
   Paper,
   TextField,
   Button,
-  Grid,
   Tooltip,
   IconButton,
   Alert,
@@ -26,6 +25,7 @@ import {
   Check as CheckIcon,
   Refresh as RefreshIcon,
 } from "@mui/icons-material";
+import Grid from "@mui/material/Grid";
 import jmespath from "jmespath";
 
 function MainPage({
@@ -187,13 +187,23 @@ function MainPage({
   };
 
   return (
-    <Box component="main" sx={{ flexGrow: 1, py: 3, px: { xs: 2, md: 4 } }}>
+    <Box
-      <Box sx={{ mb: 4, maxWidth: 800, mx: "auto" }}>
+      sx={{
+        flexGrow: 1,
+        pt: 1,
+        pb: 3,
+        px: { xs: 2, md: 4 },
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
+      <Box sx={{ mb: 2, flexShrink: 0 }}>
         <Typography
-          variant="body1"
+          variant="body2"
           color="text.secondary"
-          align="center"
+          align="left"
-          sx={{ mb: 3 }}
         >
           Validate and test JMESPath expressions against JSON data in real-time.
           Enter your JMESPath query and JSON data below to see the results
@@ -203,166 +213,196 @@ function MainPage({
 
       <Paper
         sx={{
-          mb: 4,
+          mb: 3,
-          p: 0,
+          flexShrink: 0,
-          borderRadius: 2,
-          overflow: "hidden",
           bgcolor: "background.paper",
+          p: 3,
+          border: 1,
+          borderColor: "divider",
         }}
       >
         <Box
           sx={{
-            px: 3,
-            py: 1.5,
             display: "flex",
             alignItems: "center",
-            gap: 1.5,
+            justifyContent: "space-between",
-            bgcolor: "action.hover",
+            mb: 2,
           }}
         >
-          <SearchIcon sx={{ fontSize: 24 }} color="primary" />
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
-          <Typography variant="subtitle1" fontWeight="600">
+            <SearchIcon sx={{ fontSize: 24 }} color="primary" />
-            JMESPath Expression
+            <Typography variant="h6" fontWeight="600">
-          </Typography>
+              JMESPath Expression
-        </Box>
+            </Typography>
-        <Box sx={{ px: 3, pb: 2 }}>
+          </Box>
-          <TextField
-            fullWidth
-            placeholder="Enter JMESPath expression (e.g., people[*].name)"
-            value={jmespathExpression}
-            onChange={handleJmespathChange}
-            error={!!error}
-            helperText={error || " "}
-            FormHelperTextProps={{
-              sx: { color: error ? "error.main" : "success.main", fontWeight: 500 }
-            }}
-            slotProps={{
-              input: {
-                style: { fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: "1rem" },
-              },
-            }}
-            sx={{
-              "& .MuiOutlinedInput-root": {
-                borderRadius: 3,
-                bgcolor: "background.paper",
-              }
-            }}
-          />
-          {showReloadButton && (
-            <Box sx={{ display: "flex", justifyContent: "center", mt: -1, mb: 2 }}>
-              <Button
-                variant="contained"
-                color="secondary"
-                onClick={onReloadSampleData}
-                startIcon={<RefreshIcon />}
-                size="small"
-              >
-                New data available - Reload
-              </Button>
-            </Box>
-          )}
         </Box>
+        <TextField
+          fullWidth
+          placeholder="Enter JMESPath expression (e.g., people[*].name)"
+          value={jmespathExpression}
+          onChange={handleJmespathChange}
+          error={!!error}
+          helperText={error || " "}
+          sx={{
+            "& .MuiInputBase-root": {
+              fontFamily: "'Noto Sans Mono', monospace",
+              fontSize: "1.1rem",
+            },
+          }}
+        />
       </Paper>
 
-      <Grid container spacing={3} sx={{ flexGrow: 1, minHeight: 0 }}>
+      <Grid container spacing={3} sx={{ flex: "1 1 0", minHeight: 0, height: 0 }}>
-        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column" }}>
+        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
           <Paper
             sx={{
               flexGrow: 1,
               display: "flex",
               flexDirection: "column",
-              borderRadius: 4,
               overflow: "hidden",
               bgcolor: "background.paper",
+              border: 1,
+              borderColor: "divider",
+              minHeight: 0,
             }}
           >
             <Box
               sx={{
                 px: 2,
-                py: 2,
+                py: 1.5,
                 bgcolor: "action.hover",
                 borderBottom: 1,
                 borderColor: "divider",
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
-                flexWrap: "wrap",
-                gap: 1,
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                <DataObjectIcon sx={{ mr: 1, fontSize: 20 }} color="primary" />
+                <DataObjectIcon sx={{ fontSize: 20 }} color="primary" />
                 <Typography variant="subtitle2" color="text.primary">
                   JSON Input
                 </Typography>
+                {showReloadButton && (
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    onClick={onReloadSampleData}
+                    startIcon={<RefreshIcon fontSize="inherit" />}
+                    size="small"
+                    sx={{
+                      ml: 1,
+                      px: 1,
+                      py: 0.25,
+                      fontSize: "0.65rem",
+                      textTransform: "none",
+                      whiteSpace: "nowrap",
+                      minWidth: "auto",
+                    }}
+                  >
+                    Reload data
+                  </Button>
+                )}
               </Box>
-              <Stack direction="row" spacing={1} flexWrap="wrap">
+              <Stack direction="row" spacing={1} alignItems="center">
                 <Tooltip title="Load from Disk">
-                  <span>
+                  <IconButton
-                    <IconButton size="medium" onClick={loadFromDisk} color="primary" aria-label="Load from Disk">
+                    size="small"
-                      <FileOpenIcon fontSize="small" />
+                    onClick={loadFromDisk}
-                    </IconButton>
+                    color="primary"
-                  </span>
+                    aria-label="Load from Disk"
+                  >
+                    <FileOpenIcon fontSize="small" />
+                  </IconButton>
                 </Tooltip>
                 <Tooltip title="Load Logs">
-                  <span>
+                  <IconButton
-                    <IconButton size="medium" onClick={loadLogFile} color="primary" aria-label="Load Logs">
+                    size="small"
-                      <UploadFileIcon fontSize="small" />
+                    onClick={loadLogFile}
-                    </IconButton>
+                    color="primary"
-                  </span>
+                    aria-label="Load Logs"
+                  >
+                    <UploadFileIcon fontSize="small" />
+                  </IconButton>
                 </Tooltip>
                 <Tooltip title="Load Sample">
-                  <span>
+                  <IconButton
-                    <IconButton size="medium" onClick={loadSample} color="primary" aria-label="Load Sample">
+                    size="small"
-                      <RestoreIcon fontSize="small" />
+                    onClick={loadSample}
-                    </IconButton>
+                    color="primary"
-                  </span>
+                    aria-label="Load Sample"
+                  >
+                    <RestoreIcon fontSize="small" />
+                  </IconButton>
                 </Tooltip>
                 <Tooltip title="Format">
-                  <span>
+                  <IconButton
-                    <IconButton size="medium" onClick={formatJson} color="primary" aria-label="Format">
+                    size="small"
-                      <FormatAlignLeftIcon fontSize="small" />
+                    onClick={formatJson}
-                    </IconButton>
+                    color="primary"
-                  </span>
+                    aria-label="Format"
+                  >
+                    <FormatAlignLeftIcon fontSize="small" />
+                  </IconButton>
                 </Tooltip>
                 <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
-                <Tooltip title="Clear">
+                <Tooltip title="Clear all inputs">
-                  <span>
+                  <IconButton
-                    <IconButton size="medium" onClick={clearAll} color="secondary" aria-label="Clear all inputs">
+                    size="small"
-                      <ClearIcon fontSize="small" />
+                    onClick={clearAll}
-                    </IconButton>
+                    color="secondary"
-                  </span>
+                    aria-label="Clear all inputs"
+                  >
+                    <ClearIcon fontSize="small" />
+                  </IconButton>
                 </Tooltip>
               </Stack>
             </Box>
-            <Box sx={{ p: 2, flexGrow: 1, display: "flex", flexDirection: "column" }}>
+            <Box sx={{ p: 2, flex: "1 1 0", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
               <TextField
                 multiline
                 fullWidth
                 value={jsonData}
                 onChange={handleJsonChange}
                 placeholder="Enter JSON data here..."
-                error={!!jsonError}
                 variant="standard"
                 slotProps={{
                   input: {
                     disableUnderline: true,
                     style: {
                       fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                      height: "100%",
-                      alignItems: "flex-start",
                       fontSize: "0.85rem",
                       lineHeight: 1.5,
+                      height: "100%",
+                      boxSizing: "border-box",
                     },
                   },
                 }}
                 sx={{
-                  flexGrow: 1,
+                  flex: "1 1 0",
-                  "& .MuiInputBase-root": { height: "100%", overflow: "auto" },
+                  display: "flex",
+                  flexDirection: "column",
+                  height: 0,
+                  minHeight: 0,
+                  "& .MuiInputBase-root": {
+                    flex: "1 1 0",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    height: "100%",
+                    minHeight: 0,
+                  },
+                  "& .MuiInputBase-input": {
+                    flexGrow: 1,
+                    overflow: "auto !important",
+                    height: "100% !important",
+                    resize: "none",
+                    padding: 0,
+                  },
                 }}
               />
               {jsonError && (
-                <Alert severity="error" sx={{ mt: 1, borderRadius: 2 }} variant="filled">
+                <Alert severity="error" sx={{ mt: 1, flexShrink: 0 }} variant="filled">
                   {jsonError}
                 </Alert>
               )}
@@ -370,21 +410,23 @@ function MainPage({
           </Paper>
         </Grid>
 
-        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column" }}>
+        <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
           <Paper
             sx={{
               flexGrow: 1,
               display: "flex",
               flexDirection: "column",
-              borderRadius: 4,
               overflow: "hidden",
               bgcolor: "background.paper",
+              border: 1,
+              borderColor: "divider",
+              minHeight: 0,
             }}
           >
             <Box
               sx={{
                 px: 2,
-                py: 2,
+                py: 1.5,
                 bgcolor: "action.hover",
                 borderBottom: 1,
                 borderColor: "divider",
@@ -403,7 +445,7 @@ function MainPage({
                 <Tooltip title="Copy to Clipboard">
                   <span>
                     <IconButton
-                      size="medium"
+                      size="small"
                       onClick={copyToClipboard}
                       disabled={!result || result === "null"}
                       color={copySuccess ? "success" : "primary"}
@@ -415,7 +457,7 @@ function MainPage({
                 <Tooltip title="Download Result">
                   <span>
                     <IconButton
-                      size="medium"
+                      size="small"
                       onClick={downloadResult}
                       disabled={!result || result === "null"}
                       color="primary"
@@ -426,29 +468,47 @@ function MainPage({
                 </Tooltip>
               </Stack>
             </Box>
-            <Box sx={{ p: 2, flexGrow: 1, display: "flex", flexDirection: "column" }}>
+            <Box sx={{ p: 2, flex: "1 1 0", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
               <TextField
                 multiline
                 fullWidth
                 value={result}
+                variant="standard"
+                placeholder="Results will appear here..."
                 slotProps={{
                   input: {
                     readOnly: true,
                     disableUnderline: true,
                     style: {
                       fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                      height: "100%",
-                      alignItems: "flex-start",
                       fontSize: "0.85rem",
                       lineHeight: 1.5,
+                      height: "100%",
+                      boxSizing: "border-box",
                     },
                   },
                 }}
-                variant="standard"
-                placeholder="Results will appear here..."
                 sx={{
-                  flexGrow: 1,
+                  flex: "1 1 0",
-                  "& .MuiInputBase-root": { height: "100%", overflow: "auto" },
+                  display: "flex",
+                  flexDirection: "column",
+                  height: 0,
+                  minHeight: 0,
+                  "& .MuiInputBase-root": {
+                    flex: "1 1 0",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    height: "100%",
+                    minHeight: 0,
+                  },
+                  "& .MuiInputBase-input": {
+                    flexGrow: 1,
+                    overflow: "auto !important",
+                    height: "100% !important",
+                    resize: "none",
+                    padding: 0,
+                  },
                 }}
               />
             </Box>

src/index.css

@@ -1,6 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   background-color: #f8f9fa;
+  overflow: hidden;
 }
 
 code {

src/index.jsx

@@ -1,11 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { ThemeProvider } from "@mui/material";
+import theme from "./theme";
 import "./index.css";
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme} defaultMode="system">
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );

src/theme.js

@@ -0,0 +1,13 @@
+import { createTheme } from "@mui/material";
+
+const theme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'class',
+  },
+  colorSchemes: {
+    light: true,
+    dark: true,
+  },
+});
+
+export default theme;