Refactor section title toggles into reusable ElevatedPill components

src/components/SectionLayout.jsx

@@ -1,11 +1,12 @@
 import { Outlet, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
+import Box from '@mui/material/Box';
+import SettingsIcon from '@mui/icons-material/Settings';
 import PageLayout from './PageLayout';
 import { NAV_ITEMS, SUB_NAV } from '../nav';
 import { isKategorienPath } from '../pages/artikel/categoryRoute';
 import { selectRenameMode, setRenameMode } from '../store/categorySlice';
+import { ActionElevatedPill, ToggleElevatedPill } from './ElevatedPill';
 
 export default function SectionLayout({ sectionPath }) {
   const { pathname } = useLocation();
@@ -36,18 +37,14 @@ export default function SectionLayout({ sectionPath }) {
   const showsRenameSwitch = activeSub?.segment === 'kategorien';
 
   const titleAction = showsRenameSwitch ? (
-    <FormControlLabel
-      control={
-        <Switch
-          size="small"
-          checked={renameMode}
-          onChange={(event) => dispatch(setRenameMode(event.target.checked))}
-        />
-      }
-      label="Editieren"
-      labelPlacement="end"
-      sx={{ ml: 0 }}
-    />
+    <Box sx={{ display: 'inline-flex', gap: 1 }}>
+      <ToggleElevatedPill
+        label="Editieren"
+        checked={renameMode}
+        onToggle={(checked) => dispatch(setRenameMode(checked))}
+      />
+      <ActionElevatedPill label="Extras" icon={<SettingsIcon sx={{ fontSize: 18 }} />} />
+    </Box>
   ) : null;
 
   return (