feat(Context): integrate Product and Category context providers into App

- Wrapped AppContent with ProductContextProvider and CategoryContextProvider to manage product and category states.
- Added TitleUpdater component for dynamic title management.
- Enhanced Content and ProductDetailPage components to utilize the new context for setting and clearing current product and category states.
- Updated ProductDetailWithSocket to pass setCurrentProduct function from context.

src/App.js

@@ -18,6 +18,9 @@ import PaletteIcon from "@mui/icons-material/Palette";
 import ScienceIcon from "@mui/icons-material/Science";
 
 import { CarouselProvider } from "./contexts/CarouselContext.js";
+import { ProductContextProvider } from "./context/ProductContext.js";
+import { CategoryContextProvider } from "./context/CategoryContext.js";
+import TitleUpdater from "./components/TitleUpdater.js";
 import config from "./config.js";
 import ScrollToTop from "./components/ScrollToTop.js";
 
@@ -222,6 +225,7 @@ const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => {
         bgcolor: "background.default",
       }}
     >
+      <TitleUpdater />
       <ScrollToTop />
       <Header active categoryId={categoryId} key={authVersion} />
       <Box sx={{ flexGrow: 1 }}>
@@ -450,12 +454,16 @@ const App = () => {
   return (
     <LanguageProvider i18n={i18n}>
       <ThemeProvider theme={dynamicTheme}>
-        <CssBaseline />
-          <AppContent
-            currentTheme={currentTheme}
-            dynamicTheme={dynamicTheme}
-            onThemeChange={handleThemeChange}
-          />
+        <ProductContextProvider>
+          <CategoryContextProvider>
+            <CssBaseline />
+              <AppContent
+                currentTheme={currentTheme}
+                dynamicTheme={dynamicTheme}
+                onThemeChange={handleThemeChange}
+              />
+          </CategoryContextProvider>
+        </ProductContextProvider>
       </ThemeProvider>
     </LanguageProvider>
   );