u

src/components/SectionLayout.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, Suspense } from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Popover from '@mui/material/Popover';
@@ -13,7 +13,9 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { enqueueSnackbar } from 'notistack';
 import PageLayout from './PageLayout';
 import { NAV_ITEMS, SUB_NAV, resolveActiveSub } from '../nav';
-import { isKategorienPath } from './category/categoryRoute';
+import { isKategorienPath, buildCategoryPath, KATEGORIEN_BASE } from './category/categoryRoute';
+import CategoryBreadcrumbs from './category/CategoryBreadcrumbs';
+import { getCategoryBreadcrumbs, resolveCategoryIdFromSlugPath } from '../utils/categoryUtils';
 import categoryAutomat from '../automats/categoryAutomat';
 import { ActionElevatedPill, ToggleElevatedPill } from 'dashgui/ElevatedPill';
 import { article, category } from '../api';
@@ -41,6 +43,7 @@ function selectCatSlice(s) {
 
 export default function SectionLayout({ sectionPath }) {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
   const importInputRef = useRef(null);
   const [extrasAnchor, setExtrasAnchor] = useState(null);
   const [importing, setImporting] = useState(false);
@@ -141,18 +144,39 @@ export default function SectionLayout({ sectionPath }) {
     importInputRef.current?.click();
   };
 
+  let crumbs = [];
+  if (showsRenameSwitch && categories && rootCategoryId != null) {
+    const slugPath = pathname
+      .slice(KATEGORIEN_BASE.length)
+      .split('/')
+      .filter(Boolean)
+      .map((seg) => {
+        try {
+          return decodeURIComponent(seg);
+        } catch {
+          return seg;
+        }
+      })
+      .join('/');
+    const catId = resolveCategoryIdFromSlugPath(categories, rootCategoryId, slugPath);
+    if (catId != null) crumbs = getCategoryBreadcrumbs(categories, catId, rootCategoryId);
+  }
+
   const titleAction = showsRenameSwitch ? (
-    <Box sx={{ display: 'inline-flex', gap: 1 }}>
-      <ToggleElevatedPill
-        label="Edit"
-        checked={renameMode}
-        onToggle={(checked) => categoryAutomat.actions.setRenameMode(checked)}
-      />
-      <ActionElevatedPill
-        label="Extras"
-        icon={<SettingsIcon sx={{ fontSize: 18 }} />}
-        onClick={(event) => setExtrasAnchor(event.currentTarget)}
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: 1, minWidth: 0 }}>
+      <CategoryBreadcrumbs
+        crumbs={crumbs}
+        variant="h6"
+        sx={{ m: 0, minWidth: 0 }}
+        onNavigate={(id) => navigate(buildCategoryPath(categories, rootCategoryId, id))}
       />
+      <Box sx={{ ml: 'auto', display: 'inline-flex' }}>
+        <ToggleElevatedPill
+          label="Edit"
+          checked={renameMode}
+          onToggle={(checked) => categoryAutomat.actions.setRenameMode(checked)}
+        />
+      </Box>
       <input
         ref={importInputRef}
         type="file"
@@ -195,8 +219,9 @@ export default function SectionLayout({ sectionPath }) {
 
   return (
     <PageLayout
-      title={pageTitle}
+      title={showsRenameSwitch ? '' : pageTitle}
       showTitle={!isArticleDetail}
+      titleWide={showsRenameSwitch ? 99 : undefined}
       titleAction={titleAction}
     >
       <Suspense

src/components/category/CategoryBreadcrumbs.jsx

@@ -8,18 +8,18 @@ class CategoryBreadcrumbs extends Component {
   };
 
   render() {
-    const { crumbs } = this.props;
+    const { crumbs, sx, variant = 'body2' } = this.props;
     const visible = (crumbs ?? []).filter((crumb) => crumb.name);
     if (visible.length === 0) return null;
 
     return (
-      <Breadcrumbs sx={{ mb: 2 }} aria-label="Kategoriepfad">
+      <Breadcrumbs sx={sx ?? { mb: 2 }} aria-label="Kategoriepfad">
         {visible.map((crumb, index) => (
           <Link
             key={crumb.id}
             component="button"
             type="button"
-            variant="body2"
+            variant={variant}
             underline="always"
             color="inherit"
             aria-current={index === visible.length - 1 ? 'page' : undefined}

src/routes/artikel/kategorien.jsx

@@ -7,7 +7,7 @@ import { enqueueSnackbar } from 'notistack';
 import BackendError from '../../components/BackendError';
 import CategorySortable from '../../components/category/CategorySortable';
 import CategoryPickerDialog from '../../components/article/CategoryPickerDialog';
-import { NewCategoryTile, CategoryBreadcrumbs } from '../../components/category';
+import { NewCategoryTile } from '../../components/category';
 import { NewArticleTile } from '../../components/article';
 import { notifyError } from '../../utils/notify';
 import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
@@ -430,11 +430,6 @@ class ArtikelKategorienPage extends PureComponent {
 
     return (
       <>
-        <CategoryBreadcrumbs
-          crumbs={breadcrumbs}
-          onNavigate={this.navigateToCategoryById}
-        />
-
         {routeError && (
           <BackendError
             error={routeError}