From 18fa62514a4dd98d0d2db71ee7c3d318e4778815 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Wed, 21 Oct 2026 00:33:36 +0200
Subject: [PATCH] u

---
 src/routes/artikel.jsx | 256 ++++++++++++++++++-----------------------
 1 file changed, 115 insertions(+), 141 deletions(-)

diff --git a/src/routes/artikel.jsx b/src/routes/artikel.jsx
index 9076f6f..39582f9 100644
--- a/src/routes/artikel.jsx
+++ b/src/routes/artikel.jsx
@@ -57,31 +57,21 @@ import { SCRIM_LABEL } from '../colors';
 // #region Styles & Measure Sample
 const resultRowSx = {
   alignItems: 'center',
-  minHeight: 64,
-  maxHeight: 64,
-  height: 64,
+  minHeight: 40,
+  maxHeight: 40,
+  height: 40,
   boxSizing: 'border-box',
   py: 0,
+  gap: 1.25,
   // Keep every row one line so sample height matches real rows.
   '& .MuiListItemText-root': { minWidth: 0, my: 0 },
-  '& .MuiListItemText-primary': {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    lineHeight: '22px',
-    height: '22px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .MuiListItemText-secondary': {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    lineHeight: '20px',
-    height: '20px',
-    display: 'flex',
-    alignItems: 'center',
-  },
+};
+
+const resultCellSx = {
+  flexShrink: 0,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
 };
 
 /**
@@ -112,16 +102,8 @@ class ResultRow extends Component {
           disabled
           sx={{ ...resultRowSx, pointerEvents: 'none', userSelect: 'none', opacity: 0 }}
         >
-          <ListItemText
-            primary={'\u00A0'}
-            slotProps={{ primary: { fontWeight: 500, noWrap: true } }}
-          />
-          <Typography
-            variant="body2"
-            sx={{ fontWeight: 600, flexShrink: 0, ml: 2, visibility: 'hidden' }}
-          >
-            &nbsp;
-          </Typography>
+          <Box sx={{ width: 28, height: 28, flexShrink: 0 }} />
+          <Typography variant="body2">&nbsp;</Typography>
         </ListItemButton>
       );
     }
@@ -139,120 +121,112 @@ class ResultRow extends Component {
         onMouseDown={(e) => e.preventDefault()}
         onClick={() => onOpenArticle?.(row)}
         sx={resultRowSx}
+        title={row.sku}
       >
-        <ListItemText
-          primary={
+        <Box
+          sx={{
+            width: 28,
+            height: 28,
+            flexShrink: 0,
+            borderRadius: 0.5,
+            overflow: 'hidden',
+            bgcolor: 'action.hover',
+          }}
+        >
+          {row.smallThumbBinary && (
             <Box
-              component="span"
-              sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 0.75,
-                maxWidth: '100%',
-              }}
-            >
-              <Box
-                component="span"
-                sx={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {row.name}
-              </Box>
-              {showChildBadge && (
-                <Box
-                  component="span"
-                  title={`${childCount} Varianten`}
-                  sx={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    px: 0.75,
-                    py: 0.25,
-                    borderRadius: 999,
-                    bgcolor: SCRIM_LABEL,
-                    color: 'common.white',
-                    fontSize: 11,
-                    fontWeight: 600,
-                    lineHeight: 1.2,
-                    whiteSpace: 'nowrap',
-                    flexShrink: 0,
-                    pointerEvents: 'none',
-                  }}
-                >
-                  {childCount}
-                </Box>
-              )}
-            </Box>
-          }
-          secondary={
-            <Typography
-              component="span"
-              variant="body2"
-              color="text.secondary"
-              noWrap
-              sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 0.5,
-                maxWidth: '100%',
-                lineHeight: '20px',
-                height: '20px',
-              }}
-            >
-              {(row.brand?.name || row.brandName) ? (
-                <Box
-                  component="span"
-                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}
-                >
-                  <BrandLabel
-                    brand={row.brand || { name: row.brandName, thumbHash: row.brandThumbHash }}
-                    name={row.brand?.name || row.brandName}
-                    size={14}
-                    spacing={0.5}
-                    typographyProps={{
-                      variant: 'body2',
-                      color: 'text.secondary',
-                      noWrap: true,
-                    }}
-                  />
-                  <span>·</span>
-                </Box>
-              ) : null}
-              <Box component="span" sx={{ flexShrink: 0 }}>
-                {row.sku}
-              </Box>
-              <Box component="span" sx={{ flexShrink: 0 }}>
-                ·
-              </Box>
-              <Box
-                component="span"
-                sx={{ flexShrink: 0 }}
-                title={
-                  row.warehouses?.length > 0
-                    ? row.warehouses.map((w) => `${w.name || 'Lager'}: ${formatStock(w.stock)}`).join(' · ')
-                    : undefined
-                }
-              >
-                Bestand {formatStock(row.stock)}
-              </Box>
-              {row.categories ? (
-                <Box
-                  component="span"
-                  sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-                >
-                  {` · ${formatCategoryList(row.categories, categoryFacets ?? {})}`}
-                </Box>
-              ) : null}
-            </Typography>
-          }
-          slotProps={{ primary: { fontWeight: 500, noWrap: true } }}
-        />
+              component="img"
+              alt=""
+              src={`data:image/avif;base64,${row.smallThumbBinary}`}
+              sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+            />
+          )}
+        </Box>
         <Typography
           variant="body2"
-          sx={{ fontWeight: 600, flexShrink: 0, ml: 2 }}
+          color="text.secondary"
+          sx={{ ...resultCellSx, minWidth: 28, textAlign: 'right' }}
+          title={
+            row.warehouses?.length > 0
+              ? row.warehouses.map((w) => `${w.name || 'Lager'}: ${formatStock(w.stock)}`).join(' · ')
+              : undefined
+          }
+        >
+          {formatStock(row.stock)}
+        </Typography>
+        {row.categories ? (
+          <Typography
+            variant="body2"
+            sx={{ ...resultCellSx, maxWidth: '20%', color: '#9aa0a6' }}
+          >
+            {formatCategoryList(row.categories, categoryFacets ?? {})}
+          </Typography>
+        ) : null}
+        {(row.brand?.name || row.brandName) ? (
+          <Box
+            sx={{
+              ...resultCellSx,
+              maxWidth: '16%',
+              display: 'inline-flex',
+              alignItems: 'center',
+              color: '#1976d2',
+              fontWeight: 500,
+              '& *': { color: '#1976d2 !important' },
+            }}
+          >
+            <BrandLabel
+              brand={row.brand || { name: row.brandName, thumbHash: row.brandThumbHash }}
+              name={row.brand?.name || row.brandName}
+              size={14}
+              spacing={0.5}
+              typographyProps={{ variant: 'body2', color: 'primary.main', noWrap: true }}
+            />
+          </Box>
+        ) : null}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.75,
+            minWidth: 0,
+            flex: 1,
+          }}
+        >
+          <Typography
+            variant="body2"
+            noWrap
+            sx={{ fontWeight: 500, minWidth: 0 }}
+          >
+            {row.name}
+          </Typography>
+          {showChildBadge && (
+            <Box
+              component="span"
+              title={`${childCount} Varianten`}
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                px: 0.75,
+                py: 0.25,
+                borderRadius: 999,
+                bgcolor: SCRIM_LABEL,
+                color: 'common.white',
+                fontSize: 11,
+                fontWeight: 600,
+                lineHeight: 1.2,
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+                pointerEvents: 'none',
+              }}
+            >
+              {childCount}
+            </Box>
+          )}
+        </Box>
+        <Typography
+          variant="body2"
+          sx={{ fontWeight: 600, flexShrink: 0 }}
         >
           {price != null ? formatPrice(price) : '—'}
         </Typography>