Enhance SearchBar: remove loading state, add product details in suggestions

- Remove CircularProgress component and loadingSuggestions state
- Remove maxHeight limit from suggestions dropdown (already limiting to 8 results)
- Display price, VAT, and delivery days in suggestion list
- Use existing i18n translation keys (product:inclVat, delivery:times.*)

src/components/header/SearchBar.js

@@ -7,16 +7,17 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import SearchIcon from "@mui/icons-material/Search";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { useNavigate, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const SearchBar = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
+  const { t } = useTranslation(['product', 'delivery']);
 
   // State management
   const [searchQuery, setSearchQuery] = React.useState(
@@ -25,7 +26,6 @@ const SearchBar = () => {
   const [suggestions, setSuggestions] = React.useState([]);
   const [showSuggestions, setShowSuggestions] = React.useState(false);
   const [selectedIndex, setSelectedIndex] = React.useState(-1);
-  const [loadingSuggestions, setLoadingSuggestions] = React.useState(false);
 
   // Refs for debouncing and timers
   const debounceTimerRef = React.useRef(null);
@@ -61,12 +61,9 @@ const SearchBar = () => {
       if (!query || query.length < 2) {
         setSuggestions([]);
         setShowSuggestions(false);
-        setLoadingSuggestions(false);
         return;
       }
 
-      setLoadingSuggestions(true);
-
       window.socketManager.emit(
         "getSearchProducts",
         {
@@ -74,8 +71,6 @@ const SearchBar = () => {
           limit: 8,
         },
         (response) => {
-          setLoadingSuggestions(false);
-
           if (response && response.products) {
             // getSearchProducts returns response.products array
             const suggestions = response.products.slice(0, 8); // Limit to 8 suggestions
@@ -184,6 +179,15 @@ const SearchBar = () => {
     }, 200);
   };
 
+  // Get delivery days based on availability
+  const getDeliveryDays = (product) => {
+    if (product.available === 1) {
+      return t('delivery:times.standard2to3Days');
+    } else if (product.incoming === 1 || product.availableSupplier === 1) {
+      return t('delivery:times.supplier7to9Days');
+    }
+  };
+
   // Handle enter icon click
   const handleEnterClick = () => {
     delete window.currentSearchQuery;
@@ -255,13 +259,11 @@ const SearchBar = () => {
           ),
           endAdornment: (
             <InputAdornment position="end">
-                              {loadingSuggestions && <CircularProgress size={16} />}
               <IconButton
                 size="small"
                 onClick={handleEnterClick}
                 aria-label="Suche starten"
                 sx={{
-                  ml: loadingSuggestions ? 0.5 : 0,
                   p: 0.5,
                   color: "text.secondary",
                   "&:hover": {
@@ -288,8 +290,6 @@ const SearchBar = () => {
             left: 0,
             right: 0,
             zIndex: 1300,
-            maxHeight: "300px",
-            overflow: "auto",
             mt: 0.5,
             borderRadius: 2,
           }}
@@ -321,6 +321,11 @@ const SearchBar = () => {
                       {suggestion.name}
                     </Typography>
                   }
+                  secondary={
+                    <Typography variant="caption" color="text.secondary">
+                      {suggestion.price?.toFixed(2)}€ ({t('product:inclVat', { vat: suggestion.vat })}) · {getDeliveryDays(suggestion)}
+                    </Typography>
+                  }
                 />
               </ListItem>
             ))}