feat: add maintenance mode

Author: mois-ilya

src/pages/index.tsx

@@ -4,6 +4,8 @@ import { lazy } from '@loadable/component';
 import { useMaybeProject } from 'src/shared/contexts/ProjectContext';
 import { useUserQuery } from 'src/entities/user/queries';
 import { useProjectsQuery } from 'src/shared/queries/projects';
+import { isMaintenanceActive } from 'src/shared/config/maintenance';
+import { MaintenancePage } from 'src/shared/ui/MaintenancePage';
 import AppInitialization from 'src/processes/AppInitialization';
 import { Layout } from './layouts';
 import { LayoutSolid } from 'src/pages/layouts/LayoutSolid';
@@ -74,6 +76,15 @@ const Routing: FC = () => {
         );
     }
 
+    // Maintenance mode — show maintenance page for authenticated users
+    if (isMaintenanceActive()) {
+        return (
+            <AppInitialization isLoading={isAppLoading}>
+                <MaintenancePage />
+            </AppInitialization>
+        );
+    }
+
     // Authenticated user but no project selected - show create project page
     if (!project) {
         const currentPath = location.pathname + location.search;

src/shared/config/maintenance.ts

@@ -0,0 +1,19 @@
+interface MaintenanceConfig {
+    enabled: boolean;
+    /** ISO 8601 date string for estimated recovery, e.g. "2026-02-14T10:00:00Z" */
+    estimatedEndTime?: string;
+    /** Custom message to display instead of the default */
+    message?: string;
+}
+
+const BYPASS_KEY = 'bypass_maintenance';
+
+export const maintenanceConfig: MaintenanceConfig = {
+    enabled: true,
+    estimatedEndTime: "2026-02-16T08:30:00Z",
+    message: "We are performing scheduled maintenance to improve our services."
+};
+
+export function isMaintenanceActive(): boolean {
+    return maintenanceConfig.enabled && localStorage.getItem(BYPASS_KEY) !== '1';
+}

src/shared/ui/MaintenancePage.tsx

@@ -0,0 +1,81 @@
+import { FC, useMemo } from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { TonConsoleIcon } from 'src/shared/ui/icons/TonConsoleIcon';
+import { H4 } from 'src/shared/ui/typography';
+import { maintenanceConfig } from 'src/shared/config/maintenance';
+import { useLogoutMutation } from 'src/entities/user/queries';
+
+function formatEndTime(isoString: string): string {
+    const date = new Date(isoString);
+
+    const local = date.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+
+    const utc = date.toLocaleString('en-GB', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: 'UTC'
+    });
+
+    return `${local} (${utc} UTC)`;
+}
+
+export const MaintenancePage: FC = () => {
+    const { mutate: logout, isPending: isLoggingOut } = useLogoutMutation();
+
+    const estimatedEnd = useMemo(() => {
+        const { estimatedEndTime } = maintenanceConfig;
+        if (!estimatedEndTime) {
+            return null;
+        }
+        return formatEndTime(estimatedEndTime);
+    }, []);
+
+    return (
+        <Flex
+            align="center"
+            justify="center"
+            direction="column"
+            h="100vh"
+            px={4}
+            bgColor="background.page"
+        >
+            <Flex align="center" gap={2} mb={10}>
+                <TonConsoleIcon w="40px" h="40px" />
+                <H4>Ton Console</H4>
+            </Flex>
+
+            <Box textStyle="h2" mb={4} color="text.primary">
+                Under Maintenance
+            </Box>
+
+            <Text sx={{ textWrap: 'balance' }} textStyle="body1" maxW="480px" mb={2} color="text.secondary" textAlign="center">
+                {maintenanceConfig.message ??
+                    'We are performing scheduled maintenance. The service will be back shortly.'}
+            </Text>
+
+            {estimatedEnd && (
+                <Text textStyle="body2" mb={8} color="text.tertiary">
+                    Expected back by {estimatedEnd}
+                </Text>
+            )}
+
+            {!estimatedEnd && <Box mb={8} />}
+
+            <Button
+                isLoading={isLoggingOut}
+                onClick={() => logout()}
+                size="sm"
+                variant="outline"
+            >
+                Log out
+            </Button>
+        </Flex>
+    );
+};