u

src/components/brand/ArtikelMarke.jsx

@@ -1,4 +1,5 @@
 import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
@@ -9,6 +10,7 @@ import brandAutomat from '../../automats/brandAutomat';
 import { notifyError } from '../../utils/notify';
 import BrandThumb from './BrandThumb';
 import BrandImageSearchDialog from './BrandImageSearchDialog';
+import BrandLogoPreviewDialog from './BrandLogoPreviewDialog';
 
 class ArtikelMarke extends PureComponent {
   constructor(props) {
@@ -16,6 +18,7 @@ class ArtikelMarke extends PureComponent {
     this.state = {
       draft: props.brand?.name ?? '',
       logoOpen: false,
+      previewOpen: false,
     };
   }
 
@@ -29,6 +32,8 @@ class ArtikelMarke extends PureComponent {
     }
   }
 
+  hasLogo = () => Boolean(this.props.brand?.pics?.[0]?.fullHash || this.props.brand?.pics?.[0]?.thumbHash);
+
   handleChange = (next) => {
     this.setState({ draft: next });
     this.props.onChange?.(next, this.props.brand);
@@ -70,13 +75,22 @@ class ArtikelMarke extends PureComponent {
   };
 
   handleSearchLogo = () => {
-    this.setState({ logoOpen: true });
+    this.setState({ logoOpen: true, previewOpen: false });
   };
 
   handleLogoClose = () => {
     this.setState({ logoOpen: false });
   };
 
+  handleThumbClick = () => {
+    if (this.props.disabled || !this.hasLogo()) return;
+    this.setState({ previewOpen: true });
+  };
+
+  handlePreviewClose = () => {
+    this.setState({ previewOpen: false });
+  };
+
   handleDelete = () => {
     const { brand } = this.props;
     if (!window.confirm(`Marke „${brand.name}" wirklich löschen?`)) return;
@@ -92,8 +106,9 @@ class ArtikelMarke extends PureComponent {
 
   render() {
     const { brand, disabled, sx } = this.props;
-    const { draft, logoOpen } = this.state;
+    const { draft, logoOpen, previewOpen } = this.state;
     const name = brand?.name ?? '';
+    const hasLogo = this.hasLogo();
 
     return (
       <>
@@ -101,20 +116,30 @@ class ArtikelMarke extends PureComponent {
           disableGutters
           sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
         >
-          <BrandThumb
-            brand={brand}
-            size={40}
-            fallback={
-              <IconButton
-                aria-label={`Logo für „${name}" suchen`}
-                disabled={disabled}
-                onClick={this.handleSearchLogo}
-                sx={{ width: 40, height: 40, flexShrink: 0 }}
-              >
-                <ImageSearchIcon sx={{ fontSize: 24 }} />
-              </IconButton>
-            }
-          />
+          {hasLogo ? (
+            <Box
+              component="span"
+              onClick={this.handleThumbClick}
+              sx={{
+                display: 'inline-flex',
+                flexShrink: 0,
+                borderRadius: 1,
+                cursor: disabled ? 'default' : 'pointer',
+                '&:hover': disabled ? undefined : { opacity: 0.8 },
+              }}
+            >
+              <BrandThumb brand={brand} size={40} />
+            </Box>
+          ) : (
+            <IconButton
+              aria-label={`Logo für „${name}" suchen`}
+              disabled={disabled}
+              onClick={this.handleSearchLogo}
+              sx={{ width: 40, height: 40, flexShrink: 0 }}
+            >
+              <ImageSearchIcon sx={{ fontSize: 24 }} />
+            </IconButton>
+          )}
 
           <SingleLineTextEdit
             size="small"
@@ -143,6 +168,15 @@ class ArtikelMarke extends PureComponent {
             onClose={this.handleLogoClose}
           />
         ) : null}
+        {previewOpen ? (
+          <BrandLogoPreviewDialog
+            open
+            brand={brand}
+            disabled={disabled}
+            onClose={this.handlePreviewClose}
+            onSearchNew={this.handleSearchLogo}
+          />
+        ) : null}
       </>
     );
   }

src/components/brand/BrandLogoPreviewDialog.jsx

@@ -0,0 +1,176 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import AppDialog from '../AppDialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
+import { enqueueSnackbar } from 'notistack';
+import { thumb } from '../../api';
+import brandAutomat from '../../automats/brandAutomat';
+import { notifyError } from '../../utils/notify';
+import ThumbHashImage from '../article/ThumbHashImage';
+import {
+  CHECKERBOARD,
+  SHADOW_THUMB_RING,
+  WHITE,
+} from '../../colors';
+
+/** Max edge (px) of the presized logo preview inside the dialog. */
+const MAX_PREVIEW = 240;
+
+/**
+ * Small fixed-size brand logo preview.
+ * Shows the stored thumb presized with thumbW/thumbH and offers
+ * Löschen / Neues Suchen / Schließen.
+ *
+ * Props: open, brand, onClose, onSearchNew, disabled?
+ */
+export default class BrandLogoPreviewDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { busy: false };
+  }
+
+  handleDelete = async () => {
+    const { brand } = this.props;
+    if (!brand?.id || this.state.busy) return;
+    if (!window.confirm(`Logo von „${brand.name ?? ''}" wirklich löschen?`)) return;
+    this.setState({ busy: true });
+    try {
+      await brandAutomat.actions.deleteImage(brand.id);
+      enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' });
+      this.props.onClose?.();
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  render() {
+    const { open, brand, disabled, onClose, onSearchNew } = this.props;
+    const { busy } = this.state;
+    const pic = brand?.pics?.[0];
+    const { fullHash, thumbHash, thumbW, thumbH } = pic ?? {};
+    const name = brand?.name ?? '';
+
+    // Presize the preview with thumbW/thumbH, capped to MAX_PREVIEW.
+    const tw = Number(thumbW);
+    const th = Number(thumbH);
+    let w = MAX_PREVIEW;
+    let h = MAX_PREVIEW;
+    if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) {
+      const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th));
+      w = Math.max(1, Math.round(tw * scale));
+      h = Math.max(1, Math.round(th * scale));
+    }
+
+    return (
+      <AppDialog
+        open={open}
+        onClose={busy ? undefined : onClose}
+        maxWidth={false}
+        fullWidth={false}
+        aria-labelledby="brand-logo-preview-title"
+        slotProps={{
+          paper: { sx: { width: 360, maxWidth: '90vw' } },
+        }}
+      >
+        <DialogTitle id="brand-logo-preview-title" sx={{ px: 2.5, pt: 2, pb: 0.5 }}>
+          Logo: {name}
+        </DialogTitle>
+
+        <DialogContent sx={{ px: 2.5, py: 1 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              py: 1,
+            }}
+          >
+            <Box
+              sx={{
+                position: 'relative',
+                width: w,
+                height: h,
+                borderRadius: 1.5,
+                overflow: 'hidden',
+                bgcolor: WHITE,
+                backgroundImage: CHECKERBOARD,
+                backgroundSize: '16px 16px',
+                backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+                boxShadow: SHADOW_THUMB_RING,
+              }}
+            >
+              {thumbHash ? <ThumbHashImage thumbHash={thumbHash} /> : null}
+              {fullHash ? (
+                <Box
+                  component="img"
+                  src={thumb.url(fullHash)}
+                  alt={`Logo von „${name}"`}
+                  draggable={false}
+                  sx={{
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    display: 'block',
+                  }}
+                />
+              ) : (
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Typography variant="caption" color="text.secondary">
+                    Kein Logo hinterlegt.
+                  </Typography>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        </DialogContent>
+
+        <DialogActions sx={{ px: 2, pb: 1.5, gap: 0.5 }}>
+          <Button
+            size="small"
+            color="error"
+            startIcon={<DeleteOutlinedIcon />}
+            disabled={busy || disabled}
+            onClick={this.handleDelete}
+          >
+            Löschen
+          </Button>
+          <Button
+            size="small"
+            startIcon={<ImageSearchIcon />}
+            disabled={busy || disabled}
+            onClick={onSearchNew}
+          >
+            Neues Suchen
+          </Button>
+          <Button
+            size="small"
+            startIcon={<CloseIcon />}
+            disabled={busy}
+            onClick={onClose}
+          >
+            Schließen
+          </Button>
+        </DialogActions>
+      </AppDialog>
+    );
+  }
+}

src/components/brand/index.js

@@ -1,6 +1,7 @@
 export { default as BrandThumb } from './BrandThumb';
 export { default as BrandLabel } from './BrandLabel';
 export { default as BrandImageSearchDialog } from './BrandImageSearchDialog';
+export { default as BrandLogoPreviewDialog } from './BrandLogoPreviewDialog';
 export { default as ArtikelMarke } from './ArtikelMarke';
 export { default as ArtikelMarkeNew } from './ArtikelMarkeNew';
 export { default as ArtikelMarkenTable } from './ArtikelMarkenTable';