frontend phase 14

client/src/layout/TopBarAndSideBarLayout.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { FunctionComponent, useMemo, useState } from 'react';
+import { FunctionComponent, ReactNode, useMemo, useState } from 'react';
 import { Stack, StackProps } from '@mui/material';
 import { AppIconButton, ErrorBoundary } from '@/components';
 import { LinkToPage } from '@/utils';
@@ -19,9 +19,11 @@ interface Props extends StackProps {
   sidebarItems: Array<LinkToPage>;
   title: string;
   variant: 'sidebarAlwaysTemporary' | 'sidebarPersistentOnDesktop' | 'sidebarAlwaysPersistent';
+  /** Extra chrome actions (e.g. the notification bell) rendered next to the dark-mode toggle. */
+  headerActions?: ReactNode;
 }
 
-const TopBarAndSideBarLayout: FunctionComponent<Props> = ({ children, sidebarItems, title, variant }) => {
+const TopBarAndSideBarLayout: FunctionComponent<Props> = ({ children, sidebarItems, title, variant, headerActions }) => {
   const [sidebarVisible, setSidebarVisible] = useState(false);
   const onMobile = useIsMobile();
 
@@ -75,11 +77,18 @@ const TopBarAndSideBarLayout: FunctionComponent<Props> = ({ children, sidebarIte
   /*
    * DarkModeToggleButton is a self-contained component that subscribes to
    * useColorScheme() on its own.  This layout component never reads the color
-   * scheme and therefore never re-renders when the theme switches.
+   * scheme and therefore never re-renders when the theme switches. The optional
+   * headerActions (e.g. the notification bell) travel alongside it.
    */
+  const headerControls = (
+    <Stack direction="row" sx={{ alignItems: 'center' }}>
+      {headerActions}
+      <DarkModeToggleButton />
+    </Stack>
+  );
   const { startNode, endNode } = sidebarProps?.anchor?.includes('left')
-    ? { startNode: LogoButton, endNode: <DarkModeToggleButton /> }
-    : { startNode: <DarkModeToggleButton />, endNode: LogoButton };
+    ? { startNode: LogoButton, endNode: headerControls }
+    : { startNode: headerControls, endNode: LogoButton };
 
   return (
     <Stack sx={stackStyles}>