feat: Integrate Material UI theme provider and enhance UI components

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>
+    </>
   );
 }