feat: Enhance ProductFilters to load manufacturer images and display them in the Filter component

src/components/Filter.js

@@ -296,6 +296,13 @@ class Filter extends Component {
                       const event = { target: { name: option.id, checked: !options[option.id] } };
                       this.handleOptionChange(event);
                     }}>
+                      {this.props.filterType === 'manufacturer' && this.props.manufacturerImages?.get(option.id) && (
+                        <img
+                          src={this.props.manufacturerImages.get(option.id)}
+                          alt=""
+                          style={{ height: '24px', width: 'auto', marginRight: '6px', verticalAlign: 'middle', objectFit: 'contain' }}
+                        />
+                      )}
                       {option.name}
                     </td>
                     <td style={countCellStyle}>

src/components/ManufacturerCarousel.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { withLanguage } from '../i18n/withTranslation.js';
 
 const ITEM_WIDTH = 140 + 16; // 140px width + 16px gap
-const AUTO_SCROLL_SPEED = 0.4;
+const AUTO_SCROLL_SPEED = 1.0;
 
 class ManufacturerCarousel extends React.Component {
   _isMounted = false;
@@ -89,7 +89,7 @@ class ManufacturerCarousel extends React.Component {
     if (!items || items.length === 0) return null;
 
     return (
-      <Box sx={{ mt: 4 }}>
+      <Box sx={{ mt: 4, mb: 4 }}>
         <Typography
           variant="h4"
           component="div"

src/components/ProductFilters.js

@@ -36,17 +36,39 @@ class ProductFilters extends Component {
     this.state = {
       availabilityValues,
       uniqueManufacturerArray,
-      attributeGroups
+      attributeGroups,
+      manufacturerImages: new Map(), // id (number) → object URL
     };
+
+    this._manufacturerImageUrls = []; // track for cleanup
   }
 
   componentDidMount() {
-    // Measure the available space dynamically
     this.adjustPaperHeight();
-    // Add event listener for window resize
     window.addEventListener('resize', this.adjustPaperHeight);
+    this._loadManufacturerImages();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.adjustPaperHeight);
+    this._manufacturerImageUrls.forEach(url => URL.revokeObjectURL(url));
+  }
+
+  _loadManufacturerImages = () => {
+    window.socketManager.emit('getHerstellerImages', {}, (res) => {
+      if (!res?.success || !res.manufacturers?.length) return;
+      const map = new Map();
+      for (const m of res.manufacturers) {
+        if (!m.imageBuffer) continue;
+        const blob = new Blob([m.imageBuffer], { type: 'image/avif' });
+        const url = URL.createObjectURL(blob);
+        map.set(m.id, url);
+        this._manufacturerImageUrls.push(url);
+      }
+      this.setState({ manufacturerImages: map });
+    });
+  };
+
   componentDidUpdate(prevProps) {
     // Regenerate values when products, attributes, or language changes
     const productsChanged = this.props.products !== prevProps.products;
@@ -82,10 +104,6 @@ class ProductFilters extends Component {
     }
   }
 
-  componentWillUnmount() {
-    // Remove event listener when component unmounts
-    window.removeEventListener('resize', this.adjustPaperHeight);
-  }
 
   adjustPaperHeight = () => {
     // Skip height adjustment on xs screens
@@ -265,6 +283,7 @@ class ProductFilters extends Component {
           products={this.props.products}
           filteredProducts={this.props.filteredProducts}
           attributes={this.props.attributes}
+          manufacturerImages={this.state.manufacturerImages}
           onFilterChange={(msg)=>{ 
             if(msg.value) {
               setSessionSetting(`filter_${msg.type}_${msg.name}`, 'true');