From a17d84744108e524b0dc0af764353262fb1c2eb3 Mon Sep 17 00:00:00 2001
From: sametcn99 <sametcn99@gmail.com>
Date: Sat, 8 Aug 2026 14:33:56 +0300
Subject: [PATCH 1/2] Improve responsive UI shell behavior

---
 ui/src/common/ConnectionErrorBanner.tsx |  11 +-
 ui/src/common/ScrollUpButton.tsx        |   5 +-
 ui/src/layout/Header.tsx                | 149 +++++++-------
 ui/src/layout/Layout.tsx                |  63 ++++--
 ui/src/layout/Navigation.tsx            | 260 ++++++++++++++++--------
 ui/tsconfig.json                        |   3 +-
 6 files changed, 312 insertions(+), 179 deletions(-)

diff --git a/ui/src/common/ConnectionErrorBanner.tsx b/ui/src/common/ConnectionErrorBanner.tsx
index 067a7eab1..20c06f9d3 100644
--- a/ui/src/common/ConnectionErrorBanner.tsx
+++ b/ui/src/common/ConnectionErrorBanner.tsx
@@ -8,16 +8,21 @@ interface ConnectionErrorBannerProps {
     message: string;
 }
 
-export const ConnectionErrorBanner = ({height, retry, message}: ConnectionErrorBannerProps) => (
+export const ConnectionErrorBanner = ({ height, retry, message }: ConnectionErrorBannerProps) => (
     <div
         style={{
             backgroundColor: '#e74c3c',
-            height,
+            minHeight: height,
             width: '100%',
             zIndex: 1300,
             position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '8px 16px',
+            boxSizing: 'border-box',
         }}>
-        <Typography align="center" variant="h6" style={{lineHeight: `${height}px`}}>
+        <Typography align="center" variant="h6" style={{ lineHeight: 1.4 }}>
             {message}{' '}
             <Button variant="outlined" onClick={retry}>
                 Retry
diff --git a/ui/src/common/ScrollUpButton.tsx b/ui/src/common/ScrollUpButton.tsx
index cf04c7f0e..1e5f007d0 100644
--- a/ui/src/common/ScrollUpButton.tsx
+++ b/ui/src/common/ScrollUpButton.tsx
@@ -9,10 +9,9 @@ const ScrollUpButton = () => {
             const currentScrollPos = Math.max(window.pageYOffset - 1000, 0);
             const opacity = Math.min(currentScrollPos / 1000, 1);
             const nextState = {display: currentScrollPos > 0 ? 'inherit' : 'none', opacity};
-            if (state.display !== nextState.display || state.opacity !== nextState.opacity) {
-                setState(nextState);
-            }
+            setState(nextState);
         };
+        scrollHandler();
         window.addEventListener('scroll', scrollHandler);
         return () => window.removeEventListener('scroll', scrollHandler);
     }, []);
diff --git a/ui/src/layout/Header.tsx b/ui/src/layout/Header.tsx
index 4ffc38a02..5720ea8fa 100644
--- a/ui/src/layout/Header.tsx
+++ b/ui/src/layout/Header.tsx
@@ -1,8 +1,8 @@
 import AppBar from '@mui/material/AppBar';
-import Button, {ButtonProps} from '@mui/material/Button';
+import Button, { ButtonProps } from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import {Theme} from '@mui/material/styles';
-import {makeStyles} from 'tss-react/mui';
+import { Theme } from '@mui/material/styles';
+import { makeStyles } from 'tss-react/mui';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import AccountCircle from '@mui/icons-material/AccountCircle';
@@ -16,10 +16,11 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuIcon from '@mui/icons-material/Menu';
 import Apps from '@mui/icons-material/Apps';
 import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
-import React, {CSSProperties} from 'react';
-import {Link} from 'react-router';
-import {useMediaQuery} from '@mui/material';
-import {ThemeKey} from './theme';
+import React, { CSSProperties } from 'react';
+import { Link } from 'react-router';
+import { useMediaQuery } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+import { ThemeKey } from './theme';
 
 const themeIcons: Record<ThemeKey, React.ReactElement> = {
     dark: <Brightness4 />,
@@ -36,9 +37,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     toolbar: {
         justifyContent: 'space-between',
-        [theme.breakpoints.down('sm')]: {
-            flexWrap: 'wrap',
-        },
     },
     menuButtons: {
         display: 'flex',
@@ -47,12 +45,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
         },
         justifyContent: 'center',
         [theme.breakpoints.down('sm')]: {
-            flexBasis: '100%',
-            marginTop: 5,
-            order: 1,
-            height: 50,
-            justifyContent: 'space-between',
-            alignItems: 'center',
+            flex: 'none',
+            height: 'auto',
+            margin: 0,
         },
     },
     title: {
@@ -81,6 +76,7 @@ interface IProps {
     showSettings: VoidFunction;
     logout: VoidFunction;
     style: CSSProperties;
+    navOpen: boolean;
     setNavOpen: (open: boolean) => void;
 }
 
@@ -92,16 +88,17 @@ const Header = ({
     toggleTheme,
     logout,
     style,
+    navOpen,
     setNavOpen,
     showSettings,
     themeMode,
 }: IProps) => {
-    const {classes} = useStyles();
+    const { classes } = useStyles();
     const themeLabel = `Toggle theme (current: ${themeMode})`;
     const themeIcon = themeIcons[themeMode];
     return (
         <AppBar
-            sx={{position: {xs: 'sticky', sm: 'fixed'}}}
+            sx={{ position: { xs: 'sticky', sm: 'fixed' } }}
             style={style}
             className={classes.appBar}>
             <Toolbar className={classes.toolbar}>
@@ -128,29 +125,34 @@ const Header = ({
                         admin={admin}
                         name={name}
                         logout={logout}
+                        navOpen={navOpen}
                         setNavOpen={setNavOpen}
                         showSettings={showSettings}
                     />
                 )}
                 <div>
-                    <IconButton
-                        onClick={toggleTheme}
-                        color="inherit"
-                        size="large"
-                        title={themeLabel}
-                        aria-label={themeLabel}>
-                        {themeIcon}
-                    </IconButton>
-
-                    <a
-                        href="https://github.com/gotify/server"
-                        className={classes.link}
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        <IconButton color="inherit" size="large">
-                            <GitHubIcon />
+                    <Tooltip title={themeLabel} arrow>
+                        <IconButton
+                            onClick={toggleTheme}
+                            color="inherit"
+                            size="large"
+                            aria-label={themeLabel}>
+                            {themeIcon}
                         </IconButton>
-                    </a>
+                    </Tooltip>
+
+                    <Tooltip title="Gotify on GitHub" arrow>
+                        <a
+                            href="https://github.com/gotify/server"
+                            className={classes.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Gotify on GitHub">
+                            <IconButton color="inherit" size="large" aria-label="Gotify on GitHub">
+                                <GitHubIcon />
+                            </IconButton>
+                        </a>
+                    </Tooltip>
                 </div>
             </Toolbar>
         </AppBar>
@@ -162,53 +164,60 @@ const Buttons = ({
     name,
     admin,
     logout,
+    navOpen,
     setNavOpen,
 }: {
     name: string;
     admin: boolean;
     logout: VoidFunction;
+    navOpen: boolean;
     setNavOpen: (open: boolean) => void;
     showSettings: VoidFunction;
 }) => {
-    const {classes} = useStyles();
+    const { classes } = useStyles();
+    const mobile = useMediaQuery('(max-width:600px)');
 
     return (
         <div className={classes.menuButtons}>
             <ResponsiveButton
-                sx={{display: {sm: 'none', xs: 'block'}}}
+                sx={{ display: { sm: 'none', xs: 'block' } }}
                 icon={<MenuIcon />}
-                onClick={() => setNavOpen(true)}
+                onClick={() => setNavOpen(!navOpen)}
                 label="menu"
                 color="inherit"
             />
-            {admin && (
-                <Link className={classes.link} to="/users" id="navigate-users">
-                    <ResponsiveButton icon={<SupervisorAccount />} label="users" color="inherit" />
-                </Link>
+            {!mobile && (
+                <>
+                    {admin && (
+                        <Link className={classes.link} to="/users" id="navigate-users">
+                            <ResponsiveButton icon={<SupervisorAccount />} label="users" color="inherit" />
+                        </Link>
+                    )}
+                    <Link className={classes.link} to="/applications" id="navigate-apps">
+                        <ResponsiveButton icon={<Chat />} label="apps" color="inherit" />
+                    </Link>
+                    <Link className={classes.link} to="/clients" id="navigate-clients">
+                        <ResponsiveButton icon={<DevicesOther />} label="clients" color="inherit" />
+                    </Link>
+                    <Link className={classes.link} to="/plugins" id="navigate-plugins">
+                        <ResponsiveButton icon={<Apps />} label="plugins" color="inherit" />
+                    </Link>
+                    <ResponsiveButton
+                        icon={<AccountCircle />}
+                        label={name}
+                        onClick={showSettings}
+                        id="changepw"
+                        color="inherit"
+                    />
+                    <ResponsiveButton
+                        icon={<ExitToApp />}
+                        label="Logout"
+                        onClick={logout}
+                        id="logout"
+                        color="inherit"
+                    />
+                </>
             )}
-            <Link className={classes.link} to="/applications" id="navigate-apps">
-                <ResponsiveButton icon={<Chat />} label="apps" color="inherit" />
-            </Link>
-            <Link className={classes.link} to="/clients" id="navigate-clients">
-                <ResponsiveButton icon={<DevicesOther />} label="clients" color="inherit" />
-            </Link>
-            <Link className={classes.link} to="/plugins" id="navigate-plugins">
-                <ResponsiveButton icon={<Apps />} label="plugins" color="inherit" />
-            </Link>
-            <ResponsiveButton
-                icon={<AccountCircle />}
-                label={name}
-                onClick={showSettings}
-                id="changepw"
-                color="inherit"
-            />
-            <ResponsiveButton
-                icon={<ExitToApp />}
-                label="Logout"
-                onClick={logout}
-                id="logout"
-                color="inherit"
-            />
         </div>
     );
 };
@@ -220,13 +229,15 @@ const ResponsiveButton: React.FC<{
     id?: string;
     onClick?: () => void;
     icon: React.ReactNode;
-}> = ({icon, label, ...rest}) => {
+}> = ({ icon, label, ...rest }) => {
     const matches = useMediaQuery('(max-width:1000px)');
     if (matches) {
         return (
-            <IconButton {...rest} size="large">
-                {icon}
-            </IconButton>
+            <Tooltip title={label} arrow>
+                <IconButton {...rest} size="large" aria-label={label}>
+                    {icon}
+                </IconButton>
+            </Tooltip>
         );
     }
     return (
diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
index 15f604aaa..fd3191a06 100644
--- a/ui/src/layout/Layout.tsx
+++ b/ui/src/layout/Layout.tsx
@@ -7,10 +7,10 @@ import {
     Paper,
     Box,
 } from '@mui/material';
-import {makeStyles} from 'tss-react/mui';
+import { makeStyles } from 'tss-react/mui';
 import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
-import {HashRouter, Navigate, Route, Routes} from 'react-router';
+import { HashRouter, Navigate, Route, Routes } from 'react-router';
 import Header from './Header';
 import Navigation from './Navigation';
 import ScrollUpButton from '../common/ScrollUpButton';
@@ -23,12 +23,12 @@ import Plugins from '../plugin/Plugins';
 import Login from '../user/Login';
 import Messages from '../message/Messages';
 import Users from '../user/Users';
-import {observer} from 'mobx-react-lite';
-import {ConnectionErrorBanner} from '../common/ConnectionErrorBanner';
-import {useStores} from '../stores';
-import {SnackbarProvider} from 'notistack';
+import { observer } from 'mobx-react-lite';
+import { ConnectionErrorBanner } from '../common/ConnectionErrorBanner';
+import { useStores } from '../stores';
+import { SnackbarProvider } from 'notistack';
 import LoadingSpinner from '../common/LoadingSpinner';
-import {isThemeKey, ThemeKey} from './theme';
+import { isThemeKey, ThemeKey } from './theme';
 import DefaultPage from '../common/DefaultPage';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -37,28 +37,39 @@ const useStyles = makeStyles()((theme: Theme) => ({
         marginTop: 64,
         padding: theme.spacing(3),
         width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            marginLeft: 250,
+            width: 'calc(100% - 250px)',
+        },
         [theme.breakpoints.down('sm')]: {
             marginTop: 0,
             padding: theme.spacing(1),
         },
     },
+    contentWithConnectionError: {
+        marginTop: 128,
+        [theme.breakpoints.down('sm')]: {
+            marginTop: 0,
+        },
+    },
 }));
 
 const localStorageThemeKey = 'gotify-theme';
+const connectionBannerHeight = 64;
 
 const Layout = observer(() => {
     const {
         currentUser: {
             loggedIn,
             authenticating,
-            user: {name, admin},
+            user: { name, admin },
             logout,
             tryReconnect,
             connectionErrorMessage,
             refreshKey,
         },
     } = useStores();
-    const {classes} = useStyles();
+    const { classes } = useStyles();
     const [currentTheme, setCurrentTheme] = React.useState<ThemeKey>(() => {
         const stored = window.localStorage.getItem(localStorageThemeKey);
         return isThemeKey(stored) ? stored : 'system';
@@ -74,7 +85,7 @@ const Layout = observer(() => {
             }),
         [paletteMode]
     );
-    const {version} = config.get('version');
+    const { version } = config.get('version');
     const [navOpen, setNavOpen] = React.useState(false);
     const [showSettings, setShowSettings] = React.useState(false);
 
@@ -106,17 +117,17 @@ const Layout = observer(() => {
                     <div key={refreshKey}>
                         {!connectionErrorMessage ? null : (
                             <ConnectionErrorBanner
-                                height={64}
+                                height={connectionBannerHeight}
                                 retry={() => tryReconnect()}
                                 message={connectionErrorMessage}
                             />
                         )}
-                        <div style={{display: 'flex', flexDirection: 'column'}}>
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                             <CssBaseline />
                             <Header
                                 admin={admin}
                                 name={name}
-                                style={{top: !connectionErrorMessage ? 0 : 64}}
+                                style={{ top: !connectionErrorMessage ? 0 : connectionBannerHeight }}
                                 version={version}
                                 loggedIn={loggedIn}
                                 themeMode={currentTheme}
@@ -124,14 +135,24 @@ const Layout = observer(() => {
                                 showSettings={() => setShowSettings(true)}
                                 logout={logout}
                                 setNavOpen={setNavOpen}
+                                navOpen={navOpen}
                             />
-                            <div style={{display: 'flex'}}>
+                            <div style={{ display: 'flex' }}>
                                 <Navigation
                                     loggedIn={loggedIn}
+                                    admin={admin}
+                                    name={name}
+                                    logout={logout}
+                                    showSettings={() => setShowSettings(true)}
+                                    bannerVisible={Boolean(connectionErrorMessage)}
                                     navOpen={navOpen}
                                     setNavOpen={setNavOpen}
                                 />
-                                <main className={classes.content}>
+                                <main
+                                    className={`${classes.content} ${connectionErrorMessage
+                                            ? classes.contentWithConnectionError
+                                            : ''
+                                        }`}>
                                     <Routes>
                                         <Route path="/login" element={<Login />} />
                                         <Route path="/" element={authed(<Messages />)} />
@@ -176,7 +197,7 @@ const Layout = observer(() => {
 });
 
 // eslint-disable-next-line
-const Lazy = ({component}: {component: () => Promise<{default: React.ComponentType<any>}>}) => {
+const Lazy = ({ component }: { component: () => Promise<{ default: React.ComponentType<any> }> }) => {
     const Component = React.lazy(component);
 
     return (
@@ -187,8 +208,8 @@ const Lazy = ({component}: {component: () => Promise<{default: React.ComponentTy
 };
 
 const RequireAuth: React.FC<
-    React.PropsWithChildren<{loggedIn: boolean; authenticating: boolean}>
-> = ({children, authenticating, loggedIn}) => {
+    React.PropsWithChildren<{ loggedIn: boolean; authenticating: boolean }>
+> = ({ children, authenticating, loggedIn }) => {
     if (authenticating) {
         return <LoadingSpinner />;
     }
@@ -198,8 +219,8 @@ const RequireAuth: React.FC<
     return <>{children}</>;
 };
 
-export const RequireElevation = observer(({children}: React.PropsWithChildren) => {
-    const {elevateStore} = useStores();
+export const RequireElevation = observer(({ children }: React.PropsWithChildren) => {
+    const { elevateStore } = useStores();
 
     if (elevateStore.elevated) {
         return <>{children}</>;
@@ -208,7 +229,7 @@ export const RequireElevation = observer(({children}: React.PropsWithChildren) =
     return (
         <DefaultPage title="Authentication Required" maxWidth={400}>
             <Paper elevation={6}>
-                <Box sx={{padding: 2}}>
+                <Box sx={{ padding: 2 }}>
                     <ElevationForm />
                 </Box>
             </Paper>
diff --git a/ui/src/layout/Navigation.tsx b/ui/src/layout/Navigation.tsx
index c20f22872..53bbe2ef2 100644
--- a/ui/src/layout/Navigation.tsx
+++ b/ui/src/layout/Navigation.tsx
@@ -1,35 +1,63 @@
 import Divider from '@mui/material/Divider';
-import Drawer, {DrawerProps} from '@mui/material/Drawer';
-import {Theme} from '@mui/material/styles';
+import Drawer, { DrawerProps } from '@mui/material/Drawer';
+import { Theme } from '@mui/material/styles';
 import React from 'react';
-import {Link} from 'react-router';
-import {observer} from 'mobx-react-lite';
-import {mayAllowPermission, requestPermission} from '../snack/browserNotification';
+import { Link } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import { mayAllowPermission, requestPermission } from '../snack/browserNotification';
 import {
     Button,
-    IconButton,
     Typography,
     ListItemText,
     ListItemAvatar,
     Avatar,
     ListItemButton,
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import {makeStyles} from 'tss-react/mui';
-import {useStores} from '../stores';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import Apps from '@mui/icons-material/Apps';
+import Chat from '@mui/icons-material/Chat';
+import DevicesOther from '@mui/icons-material/DevicesOther';
+import ExitToApp from '@mui/icons-material/ExitToApp';
+import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
+import { makeStyles } from 'tss-react/mui';
+import { useStores } from '../stores';
 
 const useStyles = makeStyles()((theme: Theme) => ({
     root: {
         height: '100%',
     },
     drawerPaper: {
-        position: 'relative',
+        position: 'fixed',
         width: 250,
-        minHeight: '100%',
         height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    drawerContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        height: '100%',
+    },
+    scrollArea: {
+        minHeight: 0,
+        overflowY: 'auto',
+        flex: 1,
+        overscrollBehavior: 'contain',
+        WebkitOverflowScrolling: 'touch',
+    },
+    mobileOnly: {
+        [theme.breakpoints.up('sm')]: {
+            display: 'none',
+        },
     },
     // eslint-disable-next-line
     toolbar: theme.mixins.toolbar as any,
+    mobileToolbar: {
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
     link: {
         color: 'inherit',
         textDecoration: 'none',
@@ -38,93 +66,161 @@ const useStyles = makeStyles()((theme: Theme) => ({
 
 interface IProps {
     loggedIn: boolean;
+    admin: boolean;
+    name: string;
+    logout: VoidFunction;
+    showSettings: VoidFunction;
+    bannerVisible: boolean;
     navOpen: boolean;
     setNavOpen: (open: boolean) => void;
 }
 
-const Navigation = observer(({loggedIn, navOpen, setNavOpen}: IProps) => {
-    const [showRequestNotification, setShowRequestNotification] =
-        React.useState(mayAllowPermission);
-    const {classes} = useStyles();
-    const {appStore} = useStores();
-    const apps = appStore.getItems();
+const Navigation = observer(
+    ({
+        loggedIn,
+        admin,
+        name,
+        logout,
+        showSettings,
+        bannerVisible,
+        navOpen,
+        setNavOpen,
+    }: IProps) => {
+        const [showRequestNotification, setShowRequestNotification] =
+            React.useState(mayAllowPermission);
+        const { classes } = useStyles();
+        const { appStore } = useStores();
+        const apps = appStore.getItems();
 
-    const userApps =
-        apps.length === 0
-            ? null
-            : apps.map((app) => (
-                  <Link
-                      onClick={() => setNavOpen(false)}
-                      className={`${classes.link} item`}
-                      to={'/messages/' + app.id}
-                      key={app.id}>
-                      <ListItemButton>
-                          <ListItemAvatar style={{minWidth: 42}}>
-                              <Avatar
-                                  style={{width: 32, height: 32}}
-                                  src={app.image}
-                                  variant="square"
-                              />
-                          </ListItemAvatar>
-                          <ListItemText primary={app.name} />
-                      </ListItemButton>
-                  </Link>
-              ));
+        const userApps =
+            apps.length === 0
+                ? null
+                : apps.map((app) => (
+                    <Link
+                        onClick={() => setNavOpen(false)}
+                        className={`${classes.link} item`}
+                        to={'/messages/' + app.id}
+                        key={app.id}>
+                        <ListItemButton>
+                            <ListItemAvatar style={{ minWidth: 42 }}>
+                                <Avatar
+                                    style={{ width: 32, height: 32 }}
+                                    src={app.image}
+                                    variant="square"
+                                />
+                            </ListItemAvatar>
+                            <ListItemText primary={app.name} />
+                        </ListItemButton>
+                    </Link>
+                ));
 
-    const placeholderItems = [
-        <ListItemButton disabled key={-1}>
-            <ListItemText primary="Some Server" />
-        </ListItemButton>,
-        <ListItemButton disabled key={-2}>
-            <ListItemText primary="A Raspberry PI" />
-        </ListItemButton>,
-    ];
+        const placeholderItems = [
+            <ListItemButton disabled key={-1}>
+                <ListItemText primary="Some Server" />
+            </ListItemButton>,
+            <ListItemButton disabled key={-2}>
+                <ListItemText primary="A Raspberry PI" />
+            </ListItemButton>,
+        ];
 
-    return (
-        <ResponsiveDrawer
-            classes={{root: classes.root, paper: classes.drawerPaper}}
-            navOpen={navOpen}
-            setNavOpen={setNavOpen}
-            id="message-navigation">
-            <div className={classes.toolbar} />
-            <Link className={classes.link} to="/" onClick={() => setNavOpen(false)}>
-                <ListItemButton disabled={!loggedIn} className="all">
-                    <ListItemText primary="All Messages" />
-                </ListItemButton>
-            </Link>
-            <Divider />
-            <div>{loggedIn ? userApps : placeholderItems}</div>
-            <Divider />
-            <Typography align="center" style={{marginTop: 10}}>
-                {showRequestNotification ? (
-                    <Button
-                        onClick={() => {
-                            requestPermission();
-                            setShowRequestNotification(false);
-                        }}>
-                        Enable Notifications
-                    </Button>
-                ) : null}
-            </Typography>
-        </ResponsiveDrawer>
-    );
-});
+        const mobileAction = (action: VoidFunction) => {
+            action();
+            setNavOpen(false);
+        };
+
+        return (
+            <ResponsiveDrawer
+                classes={{ root: classes.root, paper: classes.drawerPaper }}
+                navOpen={navOpen}
+                setNavOpen={setNavOpen}
+                bannerVisible={bannerVisible}
+                id="message-navigation">
+                <div className={classes.drawerContent}>
+                    <div className={`${classes.toolbar} ${classes.mobileToolbar}`} />
+                    <div className={classes.scrollArea}>
+                        <Link className={classes.link} to="/" onClick={() => setNavOpen(false)}>
+                            <ListItemButton disabled={!loggedIn} className="all">
+                                <ListItemText primary="All Messages" />
+                            </ListItemButton>
+                        </Link>
+                        <Divider />
+                        {loggedIn && (
+                            <div className={classes.mobileOnly}>
+                                <Link className={classes.link} to="/applications" onClick={() => setNavOpen(false)}>
+                                    <ListItemButton><ListItemAvatar><Chat /></ListItemAvatar><ListItemText primary="Applications" /></ListItemButton>
+                                </Link>
+                                <Link className={classes.link} to="/clients" onClick={() => setNavOpen(false)}>
+                                    <ListItemButton><ListItemAvatar><DevicesOther /></ListItemAvatar><ListItemText primary="Clients" /></ListItemButton>
+                                </Link>
+                                <Link className={classes.link} to="/plugins" onClick={() => setNavOpen(false)}>
+                                    <ListItemButton><ListItemAvatar><Apps /></ListItemAvatar><ListItemText primary="Plugins" /></ListItemButton>
+                                </Link>
+                                {admin && <Link className={classes.link} to="/users" onClick={() => setNavOpen(false)}>
+                                    <ListItemButton><ListItemAvatar><SupervisorAccount /></ListItemAvatar><ListItemText primary="Users" /></ListItemButton>
+                                </Link>}
+                                <Divider />
+                                <ListItemButton onClick={() => mobileAction(showSettings)}>
+                                    <ListItemAvatar><AccountCircle /></ListItemAvatar><ListItemText primary={name} />
+                                </ListItemButton>
+                                <ListItemButton onClick={() => mobileAction(logout)}>
+                                    <ListItemAvatar><ExitToApp /></ListItemAvatar><ListItemText primary="Logout" />
+                                </ListItemButton>
+                                <Divider />
+                            </div>
+                        )}
+                        {loggedIn ? userApps : placeholderItems}
+                    </div>
+                    <Divider />
+                    <Typography align="center" style={{ marginTop: 10 }}>
+                        {showRequestNotification ? (
+                            <Button
+                                onClick={() => {
+                                    requestPermission();
+                                    setShowRequestNotification(false);
+                                    setNavOpen(false);
+                                }}>
+                                Enable Notifications
+                            </Button>
+                        ) : null}
+                    </Typography>
+                </div>
+            </ResponsiveDrawer>
+        );
+    }
+);
 
 const ResponsiveDrawer: React.FC<
-    DrawerProps & {navOpen: boolean; setNavOpen: (open: boolean) => void}
-> = ({navOpen, setNavOpen, children, ...rest}) => (
+    DrawerProps & {
+        navOpen: boolean;
+        setNavOpen: (open: boolean) => void;
+        bannerVisible: boolean;
+    }
+> = ({ navOpen, setNavOpen, bannerVisible, children, ...rest }) => (
     <>
         <Drawer
-            sx={{display: {sm: 'none', xs: 'block'}}}
+            sx={{
+                display: { sm: 'none', xs: 'block' },
+                '& .MuiDrawer-paper': {
+                    top: bannerVisible ? 128 : 64,
+                    height: bannerVisible ? 'calc(100vh - 128px)' : 'calc(100vh - 64px)',
+                },
+            }}
             variant="temporary"
             open={navOpen}
+            onClose={() => setNavOpen(false)}
             {...rest}>
-            <IconButton onClick={() => setNavOpen(false)} size="large">
-                <CloseIcon />
-            </IconButton>
             {children}
         </Drawer>
-        <Drawer sx={{display: {xs: 'none', sm: 'block'}}} variant="permanent" {...rest}>
+        <Drawer
+            sx={{
+                display: { xs: 'none', sm: 'block' },
+                '& .MuiDrawer-paper': {
+                    top: bannerVisible ? 64 : 0,
+                    height: bannerVisible ? 'calc(100vh - 64px)' : '100vh',
+                },
+            }}
+            variant="permanent"
+            {...rest}>
             {children}
         </Drawer>
     </>
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 8f946afe6..54f12de5a 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -36,6 +36,7 @@
     "src/setupTests.ts"
   ],
   "include": [
-    "src"
+    "src",
+    "vite-env.d.ts"
   ]
 }

From f0c163bfbac26aa9d5406ec7014c959960484f9d Mon Sep 17 00:00:00 2001
From: sametcn99 <sametcn99@gmail.com>
Date: Sat, 8 Aug 2026 15:35:19 +0300
Subject: [PATCH 2/2] Fix UI shell formatting

---
 ui/src/common/ConnectionErrorBanner.tsx |   4 +-
 ui/src/layout/Header.tsx                |  30 +++---
 ui/src/layout/Layout.tsx                |  43 ++++----
 ui/src/layout/Navigation.tsx            | 135 +++++++++++++++---------
 4 files changed, 124 insertions(+), 88 deletions(-)

diff --git a/ui/src/common/ConnectionErrorBanner.tsx b/ui/src/common/ConnectionErrorBanner.tsx
index 20c06f9d3..3083c0d76 100644
--- a/ui/src/common/ConnectionErrorBanner.tsx
+++ b/ui/src/common/ConnectionErrorBanner.tsx
@@ -8,7 +8,7 @@ interface ConnectionErrorBannerProps {
     message: string;
 }
 
-export const ConnectionErrorBanner = ({ height, retry, message }: ConnectionErrorBannerProps) => (
+export const ConnectionErrorBanner = ({height, retry, message}: ConnectionErrorBannerProps) => (
     <div
         style={{
             backgroundColor: '#e74c3c',
@@ -22,7 +22,7 @@ export const ConnectionErrorBanner = ({ height, retry, message }: ConnectionErro
             padding: '8px 16px',
             boxSizing: 'border-box',
         }}>
-        <Typography align="center" variant="h6" style={{ lineHeight: 1.4 }}>
+        <Typography align="center" variant="h6" style={{lineHeight: 1.4}}>
             {message}{' '}
             <Button variant="outlined" onClick={retry}>
                 Retry
diff --git a/ui/src/layout/Header.tsx b/ui/src/layout/Header.tsx
index 5720ea8fa..d9e1f96dd 100644
--- a/ui/src/layout/Header.tsx
+++ b/ui/src/layout/Header.tsx
@@ -1,8 +1,8 @@
 import AppBar from '@mui/material/AppBar';
-import Button, { ButtonProps } from '@mui/material/Button';
+import Button, {ButtonProps} from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
+import {Theme} from '@mui/material/styles';
+import {makeStyles} from 'tss-react/mui';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import AccountCircle from '@mui/icons-material/AccountCircle';
@@ -16,11 +16,11 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuIcon from '@mui/icons-material/Menu';
 import Apps from '@mui/icons-material/Apps';
 import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
-import React, { CSSProperties } from 'react';
-import { Link } from 'react-router';
-import { useMediaQuery } from '@mui/material';
+import React, {CSSProperties} from 'react';
+import {Link} from 'react-router';
+import {useMediaQuery} from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
-import { ThemeKey } from './theme';
+import {ThemeKey} from './theme';
 
 const themeIcons: Record<ThemeKey, React.ReactElement> = {
     dark: <Brightness4 />,
@@ -93,12 +93,12 @@ const Header = ({
     showSettings,
     themeMode,
 }: IProps) => {
-    const { classes } = useStyles();
+    const {classes} = useStyles();
     const themeLabel = `Toggle theme (current: ${themeMode})`;
     const themeIcon = themeIcons[themeMode];
     return (
         <AppBar
-            sx={{ position: { xs: 'sticky', sm: 'fixed' } }}
+            sx={{position: {xs: 'sticky', sm: 'fixed'}}}
             style={style}
             className={classes.appBar}>
             <Toolbar className={classes.toolbar}>
@@ -174,13 +174,13 @@ const Buttons = ({
     setNavOpen: (open: boolean) => void;
     showSettings: VoidFunction;
 }) => {
-    const { classes } = useStyles();
+    const {classes} = useStyles();
     const mobile = useMediaQuery('(max-width:600px)');
 
     return (
         <div className={classes.menuButtons}>
             <ResponsiveButton
-                sx={{ display: { sm: 'none', xs: 'block' } }}
+                sx={{display: {sm: 'none', xs: 'block'}}}
                 icon={<MenuIcon />}
                 onClick={() => setNavOpen(!navOpen)}
                 label="menu"
@@ -190,7 +190,11 @@ const Buttons = ({
                 <>
                     {admin && (
                         <Link className={classes.link} to="/users" id="navigate-users">
-                            <ResponsiveButton icon={<SupervisorAccount />} label="users" color="inherit" />
+                            <ResponsiveButton
+                                icon={<SupervisorAccount />}
+                                label="users"
+                                color="inherit"
+                            />
                         </Link>
                     )}
                     <Link className={classes.link} to="/applications" id="navigate-apps">
@@ -229,7 +233,7 @@ const ResponsiveButton: React.FC<{
     id?: string;
     onClick?: () => void;
     icon: React.ReactNode;
-}> = ({ icon, label, ...rest }) => {
+}> = ({icon, label, ...rest}) => {
     const matches = useMediaQuery('(max-width:1000px)');
     if (matches) {
         return (
diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
index fd3191a06..23efb28fb 100644
--- a/ui/src/layout/Layout.tsx
+++ b/ui/src/layout/Layout.tsx
@@ -7,10 +7,10 @@ import {
     Paper,
     Box,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import {makeStyles} from 'tss-react/mui';
 import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
-import { HashRouter, Navigate, Route, Routes } from 'react-router';
+import {HashRouter, Navigate, Route, Routes} from 'react-router';
 import Header from './Header';
 import Navigation from './Navigation';
 import ScrollUpButton from '../common/ScrollUpButton';
@@ -23,12 +23,12 @@ import Plugins from '../plugin/Plugins';
 import Login from '../user/Login';
 import Messages from '../message/Messages';
 import Users from '../user/Users';
-import { observer } from 'mobx-react-lite';
-import { ConnectionErrorBanner } from '../common/ConnectionErrorBanner';
-import { useStores } from '../stores';
-import { SnackbarProvider } from 'notistack';
+import {observer} from 'mobx-react-lite';
+import {ConnectionErrorBanner} from '../common/ConnectionErrorBanner';
+import {useStores} from '../stores';
+import {SnackbarProvider} from 'notistack';
 import LoadingSpinner from '../common/LoadingSpinner';
-import { isThemeKey, ThemeKey } from './theme';
+import {isThemeKey, ThemeKey} from './theme';
 import DefaultPage from '../common/DefaultPage';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -62,14 +62,14 @@ const Layout = observer(() => {
         currentUser: {
             loggedIn,
             authenticating,
-            user: { name, admin },
+            user: {name, admin},
             logout,
             tryReconnect,
             connectionErrorMessage,
             refreshKey,
         },
     } = useStores();
-    const { classes } = useStyles();
+    const {classes} = useStyles();
     const [currentTheme, setCurrentTheme] = React.useState<ThemeKey>(() => {
         const stored = window.localStorage.getItem(localStorageThemeKey);
         return isThemeKey(stored) ? stored : 'system';
@@ -85,7 +85,7 @@ const Layout = observer(() => {
             }),
         [paletteMode]
     );
-    const { version } = config.get('version');
+    const {version} = config.get('version');
     const [navOpen, setNavOpen] = React.useState(false);
     const [showSettings, setShowSettings] = React.useState(false);
 
@@ -122,12 +122,12 @@ const Layout = observer(() => {
                                 message={connectionErrorMessage}
                             />
                         )}
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <div style={{display: 'flex', flexDirection: 'column'}}>
                             <CssBaseline />
                             <Header
                                 admin={admin}
                                 name={name}
-                                style={{ top: !connectionErrorMessage ? 0 : connectionBannerHeight }}
+                                style={{top: !connectionErrorMessage ? 0 : connectionBannerHeight}}
                                 version={version}
                                 loggedIn={loggedIn}
                                 themeMode={currentTheme}
@@ -137,7 +137,7 @@ const Layout = observer(() => {
                                 setNavOpen={setNavOpen}
                                 navOpen={navOpen}
                             />
-                            <div style={{ display: 'flex' }}>
+                            <div style={{display: 'flex'}}>
                                 <Navigation
                                     loggedIn={loggedIn}
                                     admin={admin}
@@ -149,10 +149,11 @@ const Layout = observer(() => {
                                     setNavOpen={setNavOpen}
                                 />
                                 <main
-                                    className={`${classes.content} ${connectionErrorMessage
+                                    className={`${classes.content} ${
+                                        connectionErrorMessage
                                             ? classes.contentWithConnectionError
                                             : ''
-                                        }`}>
+                                    }`}>
                                     <Routes>
                                         <Route path="/login" element={<Login />} />
                                         <Route path="/" element={authed(<Messages />)} />
@@ -197,7 +198,7 @@ const Layout = observer(() => {
 });
 
 // eslint-disable-next-line
-const Lazy = ({ component }: { component: () => Promise<{ default: React.ComponentType<any> }> }) => {
+const Lazy = ({component}: {component: () => Promise<{default: React.ComponentType<any>}>}) => {
     const Component = React.lazy(component);
 
     return (
@@ -208,8 +209,8 @@ const Lazy = ({ component }: { component: () => Promise<{ default: React.Compone
 };
 
 const RequireAuth: React.FC<
-    React.PropsWithChildren<{ loggedIn: boolean; authenticating: boolean }>
-> = ({ children, authenticating, loggedIn }) => {
+    React.PropsWithChildren<{loggedIn: boolean; authenticating: boolean}>
+> = ({children, authenticating, loggedIn}) => {
     if (authenticating) {
         return <LoadingSpinner />;
     }
@@ -219,8 +220,8 @@ const RequireAuth: React.FC<
     return <>{children}</>;
 };
 
-export const RequireElevation = observer(({ children }: React.PropsWithChildren) => {
-    const { elevateStore } = useStores();
+export const RequireElevation = observer(({children}: React.PropsWithChildren) => {
+    const {elevateStore} = useStores();
 
     if (elevateStore.elevated) {
         return <>{children}</>;
@@ -229,7 +230,7 @@ export const RequireElevation = observer(({ children }: React.PropsWithChildren)
     return (
         <DefaultPage title="Authentication Required" maxWidth={400}>
             <Paper elevation={6}>
-                <Box sx={{ padding: 2 }}>
+                <Box sx={{padding: 2}}>
                     <ElevationForm />
                 </Box>
             </Paper>
diff --git a/ui/src/layout/Navigation.tsx b/ui/src/layout/Navigation.tsx
index 53bbe2ef2..fb84f6996 100644
--- a/ui/src/layout/Navigation.tsx
+++ b/ui/src/layout/Navigation.tsx
@@ -1,10 +1,10 @@
 import Divider from '@mui/material/Divider';
-import Drawer, { DrawerProps } from '@mui/material/Drawer';
-import { Theme } from '@mui/material/styles';
+import Drawer, {DrawerProps} from '@mui/material/Drawer';
+import {Theme} from '@mui/material/styles';
 import React from 'react';
-import { Link } from 'react-router';
-import { observer } from 'mobx-react-lite';
-import { mayAllowPermission, requestPermission } from '../snack/browserNotification';
+import {Link} from 'react-router';
+import {observer} from 'mobx-react-lite';
+import {mayAllowPermission, requestPermission} from '../snack/browserNotification';
 import {
     Button,
     Typography,
@@ -19,8 +19,8 @@ import Chat from '@mui/icons-material/Chat';
 import DevicesOther from '@mui/icons-material/DevicesOther';
 import ExitToApp from '@mui/icons-material/ExitToApp';
 import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
-import { makeStyles } from 'tss-react/mui';
-import { useStores } from '../stores';
+import {makeStyles} from 'tss-react/mui';
+import {useStores} from '../stores';
 
 const useStyles = makeStyles()((theme: Theme) => ({
     root: {
@@ -76,43 +76,34 @@ interface IProps {
 }
 
 const Navigation = observer(
-    ({
-        loggedIn,
-        admin,
-        name,
-        logout,
-        showSettings,
-        bannerVisible,
-        navOpen,
-        setNavOpen,
-    }: IProps) => {
+    ({loggedIn, admin, name, logout, showSettings, bannerVisible, navOpen, setNavOpen}: IProps) => {
         const [showRequestNotification, setShowRequestNotification] =
             React.useState(mayAllowPermission);
-        const { classes } = useStyles();
-        const { appStore } = useStores();
+        const {classes} = useStyles();
+        const {appStore} = useStores();
         const apps = appStore.getItems();
 
         const userApps =
             apps.length === 0
                 ? null
                 : apps.map((app) => (
-                    <Link
-                        onClick={() => setNavOpen(false)}
-                        className={`${classes.link} item`}
-                        to={'/messages/' + app.id}
-                        key={app.id}>
-                        <ListItemButton>
-                            <ListItemAvatar style={{ minWidth: 42 }}>
-                                <Avatar
-                                    style={{ width: 32, height: 32 }}
-                                    src={app.image}
-                                    variant="square"
-                                />
-                            </ListItemAvatar>
-                            <ListItemText primary={app.name} />
-                        </ListItemButton>
-                    </Link>
-                ));
+                      <Link
+                          onClick={() => setNavOpen(false)}
+                          className={`${classes.link} item`}
+                          to={'/messages/' + app.id}
+                          key={app.id}>
+                          <ListItemButton>
+                              <ListItemAvatar style={{minWidth: 42}}>
+                                  <Avatar
+                                      style={{width: 32, height: 32}}
+                                      src={app.image}
+                                      variant="square"
+                                  />
+                              </ListItemAvatar>
+                              <ListItemText primary={app.name} />
+                          </ListItemButton>
+                      </Link>
+                  ));
 
         const placeholderItems = [
             <ListItemButton disabled key={-1}>
@@ -130,7 +121,7 @@ const Navigation = observer(
 
         return (
             <ResponsiveDrawer
-                classes={{ root: classes.root, paper: classes.drawerPaper }}
+                classes={{root: classes.root, paper: classes.drawerPaper}}
                 navOpen={navOpen}
                 setNavOpen={setNavOpen}
                 bannerVisible={bannerVisible}
@@ -146,24 +137,64 @@ const Navigation = observer(
                         <Divider />
                         {loggedIn && (
                             <div className={classes.mobileOnly}>
-                                <Link className={classes.link} to="/applications" onClick={() => setNavOpen(false)}>
-                                    <ListItemButton><ListItemAvatar><Chat /></ListItemAvatar><ListItemText primary="Applications" /></ListItemButton>
+                                <Link
+                                    className={classes.link}
+                                    to="/applications"
+                                    onClick={() => setNavOpen(false)}>
+                                    <ListItemButton>
+                                        <ListItemAvatar>
+                                            <Chat />
+                                        </ListItemAvatar>
+                                        <ListItemText primary="Applications" />
+                                    </ListItemButton>
                                 </Link>
-                                <Link className={classes.link} to="/clients" onClick={() => setNavOpen(false)}>
-                                    <ListItemButton><ListItemAvatar><DevicesOther /></ListItemAvatar><ListItemText primary="Clients" /></ListItemButton>
+                                <Link
+                                    className={classes.link}
+                                    to="/clients"
+                                    onClick={() => setNavOpen(false)}>
+                                    <ListItemButton>
+                                        <ListItemAvatar>
+                                            <DevicesOther />
+                                        </ListItemAvatar>
+                                        <ListItemText primary="Clients" />
+                                    </ListItemButton>
                                 </Link>
-                                <Link className={classes.link} to="/plugins" onClick={() => setNavOpen(false)}>
-                                    <ListItemButton><ListItemAvatar><Apps /></ListItemAvatar><ListItemText primary="Plugins" /></ListItemButton>
+                                <Link
+                                    className={classes.link}
+                                    to="/plugins"
+                                    onClick={() => setNavOpen(false)}>
+                                    <ListItemButton>
+                                        <ListItemAvatar>
+                                            <Apps />
+                                        </ListItemAvatar>
+                                        <ListItemText primary="Plugins" />
+                                    </ListItemButton>
                                 </Link>
-                                {admin && <Link className={classes.link} to="/users" onClick={() => setNavOpen(false)}>
-                                    <ListItemButton><ListItemAvatar><SupervisorAccount /></ListItemAvatar><ListItemText primary="Users" /></ListItemButton>
-                                </Link>}
+                                {admin && (
+                                    <Link
+                                        className={classes.link}
+                                        to="/users"
+                                        onClick={() => setNavOpen(false)}>
+                                        <ListItemButton>
+                                            <ListItemAvatar>
+                                                <SupervisorAccount />
+                                            </ListItemAvatar>
+                                            <ListItemText primary="Users" />
+                                        </ListItemButton>
+                                    </Link>
+                                )}
                                 <Divider />
                                 <ListItemButton onClick={() => mobileAction(showSettings)}>
-                                    <ListItemAvatar><AccountCircle /></ListItemAvatar><ListItemText primary={name} />
+                                    <ListItemAvatar>
+                                        <AccountCircle />
+                                    </ListItemAvatar>
+                                    <ListItemText primary={name} />
                                 </ListItemButton>
                                 <ListItemButton onClick={() => mobileAction(logout)}>
-                                    <ListItemAvatar><ExitToApp /></ListItemAvatar><ListItemText primary="Logout" />
+                                    <ListItemAvatar>
+                                        <ExitToApp />
+                                    </ListItemAvatar>
+                                    <ListItemText primary="Logout" />
                                 </ListItemButton>
                                 <Divider />
                             </div>
@@ -171,7 +202,7 @@ const Navigation = observer(
                         {loggedIn ? userApps : placeholderItems}
                     </div>
                     <Divider />
-                    <Typography align="center" style={{ marginTop: 10 }}>
+                    <Typography align="center" style={{marginTop: 10}}>
                         {showRequestNotification ? (
                             <Button
                                 onClick={() => {
@@ -195,11 +226,11 @@ const ResponsiveDrawer: React.FC<
         setNavOpen: (open: boolean) => void;
         bannerVisible: boolean;
     }
-> = ({ navOpen, setNavOpen, bannerVisible, children, ...rest }) => (
+> = ({navOpen, setNavOpen, bannerVisible, children, ...rest}) => (
     <>
         <Drawer
             sx={{
-                display: { sm: 'none', xs: 'block' },
+                display: {sm: 'none', xs: 'block'},
                 '& .MuiDrawer-paper': {
                     top: bannerVisible ? 128 : 64,
                     height: bannerVisible ? 'calc(100vh - 128px)' : 'calc(100vh - 64px)',
@@ -213,7 +244,7 @@ const ResponsiveDrawer: React.FC<
         </Drawer>
         <Drawer
             sx={{
-                display: { xs: 'none', sm: 'block' },
+                display: {xs: 'none', sm: 'block'},
                 '& .MuiDrawer-paper': {
                     top: bannerVisible ? 64 : 0,
                     height: bannerVisible ? 'calc(100vh - 64px)' : '100vh',