feat: Add new virtual categories 'bald' and 'neu', update category handling in renderApp, and enhance translations across multiple locales

src/components/AddToCartButton.js

@@ -10,6 +10,7 @@ import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
 import DeleteIcon from "@mui/icons-material/Delete";
+import NotificationsIcon from "@mui/icons-material/Notifications";
 import { withI18n } from "../i18n/withTranslation.js";
 
 if (!Array.isArray(window.cart)) window.cart = [];
@@ -144,11 +145,18 @@ class AddToCartButton extends Component {
             fullWidth
             variant="contained"
             size={size || "medium"}
+            startIcon={<NotificationsIcon />}
             sx={{
               borderRadius: 2,
               fontWeight: "bold",
               backgroundColor: "#ffeb3b",
               color: "#000000",
+              whiteSpace: "nowrap",
+              flexWrap: "nowrap",
+              "& .MuiButton-label": {
+                whiteSpace: "nowrap",
+                flexWrap: "nowrap",
+              },
               "&:hover": {
                 backgroundColor: "#fdd835",
               },

src/components/Content.js

@@ -341,6 +341,9 @@ class Content extends Component {
 
 
   fetchCategoryData(categoryId) {
+    if (categoryId === 'bald') {
+      sessionStorage.setItem('filter_availability', '1');
+    }
     const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
     const cachedData = getCachedCategoryData(categoryId, currentLanguage);
     if (cachedData) {
@@ -431,6 +434,18 @@ class Content extends Component {
       } catch (err) {
         console.error('Error finding category name in tree:', err);
       }
+
+      if (!enhancedResponse.categoryName && !enhancedResponse.name) {
+        if (categoryId === 'neu') {
+          enhancedResponse.categoryName = this.props.t
+            ? this.props.t('navigation.new')
+            : 'Neuheiten';
+        } else if (categoryId === 'bald') {
+          enhancedResponse.categoryName = this.props.t
+            ? this.props.t('navigation.soon')
+            : 'Demnächst';
+        }
+      }
     }
 
     this.processData(enhancedResponse);

src/components/header/CategoryList.js

@@ -7,6 +7,7 @@ import Collapse from "@mui/material/Collapse";
 import { Link } from "react-router-dom";
 import HomeIcon from "@mui/icons-material/Home";
 import FiberNewIcon from '@mui/icons-material/FiberNew';
+import LocalShippingIcon from "@mui/icons-material/LocalShipping";
 import SettingsIcon from "@mui/icons-material/Settings";
 import MenuIcon from "@mui/icons-material/Menu";
 import CloseIcon from "@mui/icons-material/Close";
@@ -309,6 +310,62 @@ class CategoryList extends Component {
           )}
         </Button>
 
+        <Button
+          component={Link}
+          to="/Kategorie/bald"
+          color="inherit"
+          size="small"
+          aria-label={this.props.t ? this.props.t('navigation.soon') : 'Demnächst'}
+          onClick={isMobile ? this.handleMobileCategoryClick : undefined}
+          sx={{
+            fontSize: "0.75rem",
+            textTransform: "none",
+            whiteSpace: "nowrap",
+            opacity: 0.9,
+            mx: isMobile ? 0 : 0.5,
+            my: 0.25,
+            minWidth: isMobile ? "100%" : "auto",
+            borderRadius: 1,
+            justifyContent: isMobile ? "flex-start" : "center",
+            transition: "all 0.2s ease",
+            textShadow: "0 1px 2px rgba(0,0,0,0.3)",
+            position: "relative"
+          }}
+        >
+          <LocalShippingIcon sx={{
+            fontSize: "1rem",
+            mr: isMobile ? 1 : 0
+          }} />
+          {isMobile && (
+            <Box sx={{ position: "relative", display: "inline-block" }}>
+              <Box
+                className="bold-text"
+                sx={{
+                  fontWeight: "bold",
+                  color: "transparent",
+                  position: "relative",
+                  zIndex: 2,
+                }}
+              >
+                {this.props.t ? this.props.t('navigation.soon') : 'Demnächst'}
+              </Box>
+              <Box
+                className="thin-text"
+                sx={{
+                  fontWeight: "400",
+                  color: "inherit",
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  zIndex: 1,
+                }}
+              >
+                {this.props.t ? this.props.t('navigation.soon') : 'Demnächst'}
+              </Box>
+            </Box>
+          )}
+        </Button>
+
 
         {categories.length > 0 ? (
           <>