Feature/storybook ci

.github/workflows/deploy-storybook.yml

@@ -45,4 +45,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deploy
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

.storybook/main.js

@@ -21,6 +21,7 @@ const config = {
   staticDirs: ['../public'],
 
   webpackFinal: async (config) => {
+    // Remove ESLint rules Storybook injects
     config.module.rules = config.module.rules.filter(
       (rule) => !(rule.use && rule.use.some((u) => u.loader?.includes('eslint')))
     );

package.json

@@ -23,6 +23,7 @@
     "i18next-http-backend": "^3.0.2",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.555.0",
+    "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^19.1.1",
     "react-countdown": "^2.3.6",

src/components/AppBar/AppBar.js

@@ -5,12 +5,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, AppBar as MuiAppBar, Toolbar } from '@mui/material';
 import { StatusBar } from '../';
-import { useCurrentSimulationRunner } from '../../state/runner/hooks';
 import { ThemeSwitch } from './components';
 
-export const AppBar = ({ children }) => {
-  const currentScenario = useCurrentSimulationRunner();
-
+export const AppBar = ({ children, currentScenario }) => {
   return (
     <MuiAppBar
       position="sticky"

src/components/MainNavigation/MainNavigation.js

@@ -268,7 +268,6 @@ export const MainNavigation = ({ onSectionChange, onDrawerWidthChange }) => {
         onUserMenuClick={handleUserMenuClick}
         isUserMenuOpen={isUserMenuOpen}
       />
-
       <UserMenu
         anchorEl={userMenuAnchor}
         open={isUserMenuOpen}

src/components/StatusBar/StatusBar.js

@@ -32,7 +32,7 @@ const STATUS_CONFIG = (theme) => ({
   },
   locked: {
     label: 'Locked',
-    bg: theme.palette.neutral.neutral03.main,
+    bg: theme.palette.background.background02.main,
     text: theme.palette.neutral.neutral02.main,
     icon: <Lock size={16} color={theme.palette.neutral.neutral02.main} />,
   },
@@ -121,7 +121,7 @@ const StatusBar = ({ status, size, message, tooltip }) => {
           },
         }}
       >
-        <span style={{ marginLeft: size === 'small' ? 8 : 0 }}>
+        <span style={{ marginLeft: size === 'small' ? 8 : 0, display: 'flex', alignItems: 'center', width: 12 }}>
           <CircleHelp size={12} color={theme.palette.secondary.main} />
         </span>
       </Tooltip>

src/layouts/TabLayout/TabLayout.js

@@ -46,7 +46,7 @@ export const TabLayout = () => {
   }, [currentWorkspace?.status, getScenario]);
 
   const BreadcrumbBar = () => (
-    <AppBar>
+    <AppBar currentScenario={currentScenario}>
       {currentWorkspace.data ? (
         <Fragment>
           <MuiLink underline="hover" color="inherit" href={`/${currentWorkspace?.data?.id}`}>