refactor: remove socket context dependencies and streamline socket handling in components for improved performance and readability

src/components/Images.js

@@ -12,7 +12,7 @@ import LoupeIcon from '@mui/icons-material/Loupe';
 class Images extends Component {
   constructor(props) {
     super(props);
-    this.state = { mainPic:0,pics:[], needsSocketRetry: false };
+    this.state = { mainPic:0,pics:[] };
   }
 
   componentDidMount  () {
@@ -22,15 +22,6 @@ class Images extends Component {
     if (prevProps.fullscreenOpen !== this.props.fullscreenOpen) {
       this.updatePics();
     }
-    
-    // Retry loading images if socket just became available
-    const wasConnected = prevProps.socketB && prevProps.socketB.connected;
-    const isNowConnected = this.props.socketB && this.props.socketB.connected;
-    
-    if (!wasConnected && isNowConnected && this.state.needsSocketRetry) {
-      this.setState({ needsSocketRetry: false });
-      this.updatePics();
-    }
   }
 
   updatePics = (newMainPic = this.state.mainPic) => {
@@ -85,14 +76,9 @@ class Images extends Component {
   }
 
   loadPic = (size,bildId,index) => {
-    // Check if socketB is available and connected before emitting
-    if (!this.props.socketB || !this.props.socketB.connected) {
-      console.log("Images: socketB not available, will retry when connected");
-      this.setState({ needsSocketRetry: true });
-      return;
-    }
+
     
-    this.props.socketB.emit('getPic', { bildId, size }, (res) => {
+    window.socketManager.emit('getPic', { bildId, size }, (res) => {
       if(res.success){
         const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
 
@@ -116,44 +102,6 @@ class Images extends Component {
   }
 
   render() {
-    // Prerender detection - if no sockets, render simple CardMedia with static path
-    if (!this.props.socketB) {
-      const getImagePath = (pictureList) => {
-        if (!pictureList || !pictureList.trim()) {
-          return '/assets/images/nopicture.jpg';
-        }
-        return `/assets/images/prod${pictureList.split(',')[0].trim()}.jpg`;
-      };
-
-      return (
-        <>
-          <Box sx={{ position: 'relative', display: 'inline-block', width: '499px', maxWidth: '100%' }}>
-            <CardMedia
-              component="img"
-              height="400"
-              image={getImagePath(this.props.pictureList)}
-              alt={this.props.productName || 'Produktbild'}
-              fetchPriority="high"
-              loading="eager"
-              sx={{ 
-                objectFit: 'contain',
-                cursor: 'pointer',
-                transition: 'transform 0.2s ease-in-out',
-                width: '499px',
-                maxWidth: '100%',
-                '&:hover': {
-                  transform: 'scale(1.02)'
-                }
-              }}
-            />
-          </Box>
-          <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-start', mt: 1, mb: 1 }}>
-            {/* Empty thumbnail gallery for prerender - reserves the mt+mb spacing (16px) */}
-          </Stack>
-        </>
-      );
-    }
-
     // SPA version - full functionality with static fallback
     const getImageSrc = () => {
       // If dynamic image is loaded, use it