Replace panel tileKey with a direct color prop.

Drop theme panelTiles keys and the ArticleView update callback wiring.

src/components/article/ArticlePhotoTile.jsx

@@ -78,7 +78,7 @@ class ArticlePhotoTile extends Component {
       wide = 1,
       minHeight = 200,
       sx,
-      tileKey,
+      color,
     } = this.props;
     const { busy, editOpen } = this.state;
     const photo = primaryPhoto(articleData);
@@ -90,7 +90,7 @@ class ArticlePhotoTile extends Component {
           wide={wide}
           minHeight={minHeight}
           sx={sx}
-          tileKey={tileKey}
+          color={color}
           action={
             hasPhoto
               ? {

src/components/article/ArticleTileTab.jsx

@@ -123,7 +123,6 @@ class ArticleTileTab extends Component {
       wide = 3,
       minHeight = 200,
       sx,
-      tileKey,
       tab = DEFAULT_ARTICLE_TAB,
     } = this.props;
     const { preferredTab } = this.state;
@@ -255,12 +254,11 @@ class ArticleTileTab extends Component {
         <PanelTile
           wide={wide}
           minHeight={minHeight}
-          tileKey={tileKey}
+          color={activeColor}
           elevation={0}
           sx={{
             gridColumn: 'auto',
             width: '100%',
-            bgcolor: activeColor,
             borderTopLeftRadius: 0,
             borderTopRightRadius: (theme) =>
               `${(theme.shape.borderRadius || 4) * PANEL_TILE_BORDER_RADIUS}px`,

src/components/article/ArticleView.jsx

@@ -1,7 +1,6 @@
 import { Component } from 'react';
 import { PanelTileGrid } from '../panels';
 import { StorageManagerContext } from '../../api/storageManagerContext';
-import { PANEL_TILE_KEYS } from '../../theme';
 import withNavigate from '../withNavigate';
 import {
   buildCategoryPath,
@@ -54,11 +53,6 @@ class ArticleView extends Component {
     }
   }
 
-  handleArticleUpdated = (next) => {
-    this.context.setArticle(next);
-    this.setState({ article: next });
-  };
-
   handleArticleDeleted = () => {
     const { navigate } = this.props;
     const { article, categories, rootCategoryId } = this.state;
@@ -87,39 +81,25 @@ class ArticleView extends Component {
 
     return (
       <PanelTileGrid>
-        <ArticleViewName
+        <ArticleViewName article={article} />
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
 
         <ArticlePhotoTile
           wide={1}
-          tileKey={PANEL_TILE_KEYS.photo}
+          color="#fde68a"
           sx={{ minHeight: 0 }}
           article={article}
-          onArticleUpdated={this.handleArticleUpdated}
         />
 
         <ArticleViewStock article={article} />
 
-        <ArticleViewBrand
+        <ArticleViewBrand article={article} />
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
 
-        <ArticleViewEANs
+        <ArticleViewEANs article={article} />
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
 
-        <ArticleViewPrice
+        <ArticleViewPrice article={article} />
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
 
         <ArticleTileTab
           wide={3}
-          tileKey={PANEL_TILE_KEYS.content}
           minHeight={200}
           article={article}
           tab={resolvedTab}

src/components/article/boxes/ArticleViewBrand.jsx

@@ -141,6 +141,7 @@ export default class ArticleViewBrand extends Component {
       <EditablePanelTile
         wide={1}
         minHeight={SECOND_ROW_MIN_HEIGHT}
+        color="#e9d5ff"
         value={value}
         onSave={this.handleSave}
         isDirty={brandDraftDirty}

src/components/article/boxes/ArticleViewEANs.jsx

@@ -105,6 +105,7 @@ export default class ArticleViewEANs extends Component {
       <EditablePanelTile
         wide={1}
         minHeight={SECOND_ROW_MIN_HEIGHT}
+        color="#e2e8f0"
         contentAlignItems="flex-start"
         value={value}
         onSave={this.handleSave}

src/components/article/boxes/ArticleViewLists.jsx

@@ -39,7 +39,7 @@ export default class ArticleViewLists extends Component {
   render() {
     const { article: articleData } = this.props;
     return (
-      <PanelTile wide={1} minHeight={200}>
+      <PanelTile wide={1} minHeight={200} color="#fbcfe8">
         <RelationLine label="Vaterartikel" active={articleData.childCount > 0}>
           {articleData.childCount}
         </RelationLine>

src/components/article/boxes/ArticleViewName.jsx

@@ -239,6 +239,7 @@ export default class ArticleViewName extends Component {
         wide={3}
         minHeight={0}
         sx={headerTileSx}
+        color="#ffffff"
         value={value}
         onSave={this.handleSave}
         isDirty={draftDirty}

src/components/article/boxes/ArticleViewPrice.jsx

@@ -506,6 +506,7 @@ export default class ArticleViewPrice extends Component {
       <EditablePanelTile
         wide={1}
         minHeight={SECOND_ROW_MIN_HEIGHT}
+        color="#bfdbfe"
         contentAlignItems="flex-start"
         value={priceValue}
         onSave={this.handleSave}

src/components/article/boxes/ArticleViewStock.jsx

@@ -29,7 +29,7 @@ export default class ArticleViewStock extends Component {
   render() {
     const { article: articleData } = this.props;
     return (
-      <PanelTile wide={1} minHeight={SECOND_ROW_MIN_HEIGHT}>
+      <PanelTile wide={1} minHeight={SECOND_ROW_MIN_HEIGHT} color="#bbf7d0">
         <PanelValue>
           {articleData.stock != null ? formatStock(articleData.stock) : null}
         </PanelValue>

src/components/panels/EditablePanelTile.jsx

@@ -227,7 +227,7 @@ class EditablePanelTileBase extends Component {
       wide = 1,
       sx,
       minHeight = 120,
-      tileKey,
+      color,
       contentAlignItems = 'center',
     } = this.props;
     const { editing, error } = this.state;
@@ -243,7 +243,7 @@ class EditablePanelTileBase extends Component {
           minHeight,
           editing,
           pending,
-          tileKey,
+          color,
           theme,
         })}
       >

src/components/panels/PanelTile.jsx

@@ -74,7 +74,7 @@ class PanelTileBase extends Component {
       children,
       sx,
       minHeight = 120,
-      tileKey,
+      color,
       action,
       elevation = 4,
     } = this.props;
@@ -87,7 +87,7 @@ class PanelTileBase extends Component {
           wide,
           sx,
           minHeight,
-          tileKey,
+          color,
           theme,
         })}
       >

src/components/panels/panelTileLayout.js

@@ -29,11 +29,6 @@ export const tileActionIconSx = {
   fontSize: 28,
 };
 
-export function panelTileBackground(theme, tileKey) {
-  if (!tileKey || !theme?.panelTiles) return undefined;
-  return theme.panelTiles[tileKey];
-}
-
 export const PANEL_TILE_BORDER_RADIUS = 4;
 
 function tileRingBoxShadow(ringColor, elevationShadow) {
@@ -47,11 +42,9 @@ export function panelTilePaperSx({
   minHeight = 120,
   editing = false,
   pending = false,
-  tileKey,
+  color,
   theme,
 }) {
-  const tileBg = panelTileBackground(theme, tileKey);
-
   const elevationShadow = theme?.shadows?.[4];
   const ringColor = pending
     ? PENDING_EDIT_BORDER
@@ -68,7 +61,7 @@ export function panelTilePaperSx({
     flexDirection: 'column',
     border: 'none',
     borderRadius: PANEL_TILE_BORDER_RADIUS,
-    ...(tileBg ? { bgcolor: tileBg } : {}),
+    ...(color ? { bgcolor: color } : {}),
     ...(ringColor
       ? {
           boxShadow: tileRingBoxShadow(ringColor, elevationShadow),

src/theme/index.js

@@ -1,4 +1,3 @@
-export { PANEL_TILE_KEYS } from './panelTiles';
 export {
   getActiveTheme,
   getActiveThemeId,

src/theme/panelTiles.js

@@ -1,11 +0,0 @@
-/** Semantic keys for article view panel tile backgrounds. */
-export const PANEL_TILE_KEYS = {
-  name: 'name',
-  photo: 'photo',
-  stock: 'stock',
-  brand: 'brand',
-  identifiers: 'identifiers',
-  price: 'price',
-  content: 'content',
-  lists: 'lists',
-};

src/theme/themes/default.js

@@ -1,6 +1,5 @@
 import { createTheme } from '@mui/material/styles';
 import { MAIN_BACKGROUND } from '../../colors';
-import { PANEL_TILE_KEYS } from '../panelTiles';
 
 const nav = {
   background: '#1a3533',
@@ -13,17 +12,6 @@ const nav = {
   itemActiveAccent: '#2dd4bf',
 };
 
-const panelTiles = {
-  [PANEL_TILE_KEYS.name]: '#ffffff',
-  [PANEL_TILE_KEYS.photo]: '#fde68a',
-  [PANEL_TILE_KEYS.stock]: '#bbf7d0',
-  [PANEL_TILE_KEYS.brand]: '#e9d5ff',
-  [PANEL_TILE_KEYS.identifiers]: '#e2e8f0',
-  [PANEL_TILE_KEYS.price]: '#bfdbfe',
-  [PANEL_TILE_KEYS.content]: '#99f6e4',
-  [PANEL_TILE_KEYS.lists]: '#fbcfe8',
-};
-
 export const defaultThemeId = 'default';
 
 export function createDefaultTheme() {
@@ -37,6 +25,5 @@ export function createDefaultTheme() {
       },
     },
     nav,
-    panelTiles,
   });
 }