formatting

interface/src/components/layout/LayoutAppBar.tsx

@@ -21,7 +21,12 @@ const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => (
     }}
   >
     <Toolbar>
-      <IconButton color="inherit" edge="start" onClick={onToggleDrawer} sx={{ mr: 2, display: { md: 'none' } }}>
+      <IconButton
+        color="inherit"
+        edge="start"
+        onClick={onToggleDrawer}
+        sx={{ mr: 2, display: { md: 'none' } }}
+      >
         <MenuIcon />
       </IconButton>
       <Typography variant="h6" noWrap component="div">

interface/src/components/layout/LayoutMenu.tsx

@@ -54,7 +54,9 @@ const LayoutMenu: FC = () => {
 
   const [menuOpen, setMenuOpen] = useState(true);
 
-  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
+    target
+  }) => {
     const loc = target.value as Locales;
     localStorage.setItem('lang', loc);
     await loadLocaleAsync(loc);
@@ -98,7 +100,14 @@ const LayoutMenu: FC = () => {
                 mb: '2px',
                 color: 'lightblue'
               }}
-              secondary={LL.CUSTOMIZATIONS() + ', ' + LL.SCHEDULER() + ', ' + LL.CUSTOM_ENTITIES(0) + '...'}
+              secondary={
+                LL.CUSTOMIZATIONS() +
+                ', ' +
+                LL.SCHEDULER() +
+                ', ' +
+                LL.CUSTOM_ENTITIES(0) +
+                '...'
+              }
               secondaryTypographyProps={{
                 noWrap: true,
                 fontSize: 12,
@@ -123,7 +132,12 @@ const LayoutMenu: FC = () => {
                 disabled={!me.admin}
                 to={`/customizations`}
               />
-              <LayoutMenuItem icon={MoreTimeIcon} label={LL.SCHEDULER()} disabled={!me.admin} to={`/scheduler`} />
+              <LayoutMenuItem
+                icon={MoreTimeIcon}
+                label={LL.SCHEDULER()}
+                disabled={!me.admin}
+                to={`/scheduler`}
+              />
               <LayoutMenuItem
                 icon={PlaylistAddIcon}
                 label={LL.CUSTOM_ENTITIES(0)}
@@ -137,7 +151,12 @@ const LayoutMenu: FC = () => {
 
       <List style={{ marginTop: `auto` }}>
         <LayoutMenuItem icon={AssessmentIcon} label={LL.SYSTEM(0)} to="/system" />
-        <LayoutMenuItem icon={SettingsIcon} label={LL.SETTINGS(0)} disabled={!me.admin} to="/settings" />
+        <LayoutMenuItem
+          icon={SettingsIcon}
+          label={LL.SETTINGS(0)}
+          disabled={!me.admin}
+          to="/settings"
+        />
         <LayoutMenuItem icon={LiveHelpIcon} label={LL.HELP_OF('')} to={`/help`} />
       </List>
       <Divider />
@@ -239,7 +258,12 @@ const LayoutMenu: FC = () => {
             </TextField>
           </Box>
           <Box>
-            <Button variant="outlined" fullWidth color="primary" onClick={() => signOut(true)}>
+            <Button
+              variant="outlined"
+              fullWidth
+              color="primary"
+              onClick={() => signOut(true)}
+            >
               {LL.SIGN_OUT()}
             </Button>
           </Box>

interface/src/components/layout/LayoutMenuItem.tsx

@@ -13,7 +13,12 @@ interface LayoutMenuItemProps {
   disabled?: boolean;
 }
 
-const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabled }) => {
+const LayoutMenuItem: FC<LayoutMenuItemProps> = ({
+  icon: Icon,
+  label,
+  to,
+  disabled
+}) => {
   const { pathname } = useLocation();
 
   const selected = routeMatches(to, pathname);
@@ -23,7 +28,9 @@ const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabl
       <ListItemIcon sx={{ color: selected ? '#90caf9' : '#9e9e9e' }}>
         <Icon />
       </ListItemIcon>
-      <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>{label}</ListItemText>
+      <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>
+        {label}
+      </ListItemText>
     </ListItemButton>
   );
 };

interface/src/components/layout/ListMenuItem.tsx

@@ -2,7 +2,14 @@ import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import { Avatar, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import {
+  Avatar,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText
+} from '@mui/material';
 import type { SvgIconProps } from '@mui/material';
 
 interface ListMenuItemProps {
@@ -27,19 +34,38 @@ function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
   );
 }
 
-const LayoutMenuItem: FC<ListMenuItemProps> = ({ icon, bgcolor, label, text, to, disabled }) => (
+const LayoutMenuItem: FC<ListMenuItemProps> = ({
+  icon,
+  bgcolor,
+  label,
+  text,
+  to,
+  disabled
+}) => (
   <>
     {to && !disabled ? (
       <ListItem
         disablePadding
         secondaryAction={
-          <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
+          <ListItemIcon
+            style={{
+              justifyContent: 'right',
+              color: 'lightblue',
+              verticalAlign: 'middle'
+            }}
+          >
             <NavigateNextIcon />
           </ListItemIcon>
         }
       >
         <ListItemButton component={Link} to={to}>
-          <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} to="" />
+          <RenderIcon
+            icon={icon}
+            bgcolor={bgcolor}
+            label={label}
+            text={text}
+            to=""
+          />
         </ListItemButton>
       </ListItem>
     ) : (