u

src/components/article/boxes/ArticleViewBrand.jsx

@@ -7,6 +7,9 @@ import { EditablePanelTile } from 'dashgui/panels';
 import { StorageManagerContext } from '../../../api/storageManagerContext';
 import { requireDefined, requireObject } from '../../../utils/apiShape';
 import { notifyError } from '../../../utils/notify';
+import InputAdornment from '@mui/material/InputAdornment';
+import { BrandLabel, BrandThumb } from '../../brand';
+
 class PanelValue extends Component {
   render() {
     const { label, children } = this.props;
@@ -27,7 +30,12 @@ class PanelValue extends Component {
 }
 
 function brandDraftValue(article) {
-  return { name: article?.brand?.name ?? '' };
+  return {
+    name: article?.brand?.name ?? '',
+    thumbHash: article?.brand?.thumbHash ?? null,
+    thumbW: article?.brand?.thumbW ?? null,
+    thumbH: article?.brand?.thumbH ?? null,
+  };
 }
 
 function brandDraftDirty(draft, saved) {
@@ -43,6 +51,11 @@ const SECOND_ROW_MIN_HEIGHT = 220;
 class BrandEdit extends Component {
   render() {
     const { draft, onChange, inputRef, brands } = this.props;
+    const trimmed = String(draft.name ?? '').trim().toLowerCase();
+    const matchingBrand = brands.find(
+      (b) => String(b.name ?? '').toLowerCase() === trimmed,
+    );
+
     return (
       <Autocomplete
         fullWidth
@@ -57,6 +70,21 @@ class BrandEdit extends Component {
         onChange={(_event, option) => {
           onChange({ name: option ? String(option.name ?? '') : '' });
         }}
+        renderOption={(props, option) => {
+          const { key, ...optionProps } = props;
+          const name = typeof option === 'string' ? option : String(option.name ?? '');
+          return (
+            <Box
+              component="li"
+              key={key}
+              {...optionProps}
+              sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+            >
+              <BrandThumb brand={option} size={20} />
+              <span>{name}</span>
+            </Box>
+          );
+        }}
         renderInput={(params) => (
           <TextField
             {...params}
@@ -65,6 +93,16 @@ class BrandEdit extends Component {
             size="small"
             slotProps={{
               ...params.slotProps,
+              input: {
+                ...params.slotProps?.input,
+                startAdornment: matchingBrand ? (
+                  <InputAdornment position="start" sx={{ mr: 0.5 }}>
+                    <BrandThumb brand={matchingBrand} size={20} />
+                  </InputAdornment>
+                ) : (
+                  params.slotProps?.input?.startAdornment
+                ),
+              },
               inputLabel: {
                 ...params.slotProps?.inputLabel,
                 shrink: true,
@@ -152,8 +190,19 @@ export default class ArticleViewBrand extends PureComponent {
         onSave={this.handleSave}
         onError={notifyError}
         isDirty={brandDraftDirty}
+        display={
+          <PanelValue>
+            {value.name ? (
+              <BrandLabel
+                brand={articleData?.brand || value}
+                name={value.name}
+                size={22}
+                typographyProps={{ variant: 'body2', fontWeight: 600 }}
+              />
+            ) : null}
+          </PanelValue>
+        }
         canSave={brandDraftValid}
-        display={<PanelValue>{value.name || null}</PanelValue>}
         edit={({ draft, onChange, inputRef }) => (
           <BrandEdit
             brands={brands}