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/components/Content.js

@@ -14,6 +14,7 @@ import CategoryBox from './CategoryBox.js';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { getAllSettingsWithPrefix } from '../utils/sessionStorage.js';
 import { withI18n } from '../i18n/withTranslation.js';
+import { withCategory } from '../context/CategoryContext.js';
 
 const isNew = (neu) => neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000);
 
@@ -221,6 +222,11 @@ class Content extends Component {
     const searchChanged = this.props.searchParams?.get('q') && (prevProps.searchParams?.get('q') !== this.props.searchParams?.get('q'));
     
     if(categoryChanged) {
+        // Clear context for new category loading
+        if (this.props.categoryContext && this.props.categoryContext.setCurrentCategory) {
+          this.props.categoryContext.setCurrentCategory(null);
+        }
+
         window.currentSearchQuery = null;
         this.setState({loaded: false, unfilteredProducts: [], filteredProducts: [], attributes: [], categoryName: null, childCategories: [], lastFetchedLanguage: currentLanguage}, () => {
           this.fetchCategoryData(this.props.params.categoryId);
@@ -299,6 +305,26 @@ class Content extends Component {
       attributes: response.attributes,
       childCategories: response.childCategories || [],
       loaded: true
+    }, () => {
+      console.log('Content: processData finished', {
+        hasContext: !!this.props.categoryContext,
+        categoryName: response.categoryName,
+        name: response.name
+      });
+      
+      if (this.props.categoryContext && this.props.categoryContext.setCurrentCategory) {
+        if (response.categoryName || response.name) {
+           console.log('Content: Setting category context');
+           this.props.categoryContext.setCurrentCategory({
+             id: this.props.params.categoryId,
+             name: response.categoryName || response.name
+           });
+        } else {
+           console.log('Content: No category name found to set in context');
+        }
+      } else {
+        console.warn('Content: categoryContext prop is missing!');
+      }
     });
   }
 
@@ -375,6 +401,27 @@ class Content extends Component {
       ...response,
       childCategories
     };
+
+    // Attempt to set category name from the tree if missing in response
+    if (!enhancedResponse.categoryName && !enhancedResponse.name) {
+       // Try to find name in the tree using the ID or SEO name
+       try {
+         const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
+         const categoryTreeCache = window.categoryService.getSync(209, currentLanguage);
+         
+         if (categoryTreeCache) {
+            const targetCategory = typeof categoryId === 'string' 
+              ? this.findCategoryBySeoName(categoryTreeCache, categoryId)
+              : this.findCategoryById(categoryTreeCache, categoryId);
+            
+            if (targetCategory && targetCategory.name) {
+               enhancedResponse.categoryName = targetCategory.name;
+            }
+         }
+       } catch (err) {
+         console.error('Error finding category name in tree:', err);
+       }
+    }
     
     this.processData(enhancedResponse);
   }
@@ -452,6 +499,12 @@ class Content extends Component {
     return category ? category.id : null;
   }
 
+  componentWillUnmount() {
+    if (this.props.categoryContext && this.props.categoryContext.setCurrentCategory) {
+      this.props.categoryContext.setCurrentCategory(null);
+    }
+  }
+
   renderParentCategoryNavigation = () => {
     const currentCategoryId = this.getCurrentCategoryId();
     if (!currentCategoryId) return null;
@@ -490,6 +543,7 @@ class Content extends Component {
   }
 
   render() {
+    // console.log('Content props:', this.props); 
     // Check if we should show category boxes instead of product list
     const showCategoryBoxes = this.state.loaded && 
                              this.state.unfilteredProducts.length === 0 && 
@@ -780,4 +834,4 @@ class Content extends Component {
   }
 }
 
-export default withRouter(withI18n()(Content));
+export default withRouter(withI18n()(withCategory(Content)));