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
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
+        <ArticleViewName article={article} />
 
         <ArticlePhotoTile
           wide={1}
-          tileKey={PANEL_TILE_KEYS.photo}
+          color="#fde68a"
           sx={{ minHeight: 0 }}
           article={article}
-          onArticleUpdated={this.handleArticleUpdated}
         />
 
         <ArticleViewStock article={article} />
 
-        <ArticleViewBrand
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
+        <ArticleViewBrand article={article} />
 
-        <ArticleViewEANs
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
+        <ArticleViewEANs article={article} />
 
-        <ArticleViewPrice
-          article={article}
-          onArticleUpdated={this.handleArticleUpdated}
-        />
+        <ArticleViewPrice article={article} />
 
         <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),