refactor: update various components to improve UI consistency

Author: kastov

package-lock.json

@@ -44,18 +44,18 @@
     "@gfazioli/mantine-text-animate": "^2.3.2",
     "@highcharts/react": "^4.0.0-beta.5",
     "@lukemorales/query-key-factory": "^1.3.4",
-    "@mantine/carousel": "^8.3.5",
-    "@mantine/charts": "^8.3.5",
-    "@mantine/code-highlight": "^8.3.5",
-    "@mantine/core": "^8.3.5",
-    "@mantine/dates": "^8.3.5",
-    "@mantine/dropzone": "^8.3.5",
-    "@mantine/form": "^8.3.5",
-    "@mantine/hooks": "^8.3.5",
-    "@mantine/modals": "^8.3.5",
-    "@mantine/notifications": "^8.3.5",
-    "@mantine/nprogress": "^8.3.5",
-    "@mantine/spotlight": "^8.3.5",
+    "@mantine/carousel": "^8.3.6",
+    "@mantine/charts": "^8.3.6",
+    "@mantine/code-highlight": "^8.3.6",
+    "@mantine/core": "^8.3.6",
+    "@mantine/dates": "^8.3.6",
+    "@mantine/dropzone": "^8.3.6",
+    "@mantine/form": "^8.3.6",
+    "@mantine/hooks": "^8.3.6",
+    "@mantine/modals": "^8.3.6",
+    "@mantine/notifications": "^8.3.6",
+    "@mantine/nprogress": "^8.3.6",
+    "@mantine/spotlight": "^8.3.6",
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
@@ -68,7 +68,7 @@
     "@tanstack/react-query-devtools": "5.85.9",
     "@tanstack/react-virtual": "^3.13.12",
     "@virtuoso.dev/masonry": "^1.3.5",
-    "axios": "^1.12.2",
+    "axios": "^1.13.1",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
     "color-hash": "^2.0.2",
@@ -80,7 +80,7 @@
     "dotenv": "^17.2.3",
     "generate-password-ts": "^1.6.5",
     "highcharts": "^12.4.0",
-    "highcharts-react-official": "^3.2.2",
+    "highcharts-react-official": "^3.2.3",
     "i18next": "^25.6.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
@@ -92,13 +92,13 @@
     "mantine-react-table": "^2.0.0-beta.9",
     "monaco-editor": "^0.52.2",
     "monaco-yaml": "^5.4.0",
-    "motion": "12.23.21",
+    "motion": "12.23.24",
     "nanoid": "^5.1.6",
     "react": "^19.2.0",
     "react-country-flag": "^3.1.0",
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
-    "react-i18next": "^16.1.6",
+    "react-i18next": "^16.2.2",
     "react-icons": "^5.5.0",
     "react-imask": "^7.6.1",
     "react-layout-masonry": "^2.0.0",

package.json

@@ -540,13 +540,6 @@
             "registration": "Registration"
         }
     },
-    "xray-json-template-description": {
-        "widget": {
-            "importing-json-subscription": "Importing JSON subscription",
-            "description-line-1": "To use this subscription, just add",
-            "description-line-2": "at the end of your subscription link. Make sure you're using one of the supported apps listed in the table below. Otherwise, subscription will work as usual for requested client. (e.g. Base64, Mihomo)"
-        }
-    },
     "happ-routing-builder": {
         "widget": {
             "copy-link": "Copy link",
@@ -1766,5 +1759,17 @@
             "reset": "Reset",
             "reset-usage": "Reset usage"
         }
+    },
+    "help-drawer": {
+        "shared": {
+            "templates-xray-json": "<h2>Xray JSON Subscription Format</h2> <p> The Xray JSON format provides native JSON-based subscription support for compatible clients. Simply append <code>/json</code> to your subscription URL to enable this format. </p> <h3>Supported Applications</h3> <ul> <li><strong>v2rayNG</strong> — version 1.8.29 or higher</li> <li><strong>V2rayN</strong> — version 6.40 or higher</li> <li><strong>Streisand</strong> — all versions</li> <li><strong>Happ</strong> — all versions</li> <li><strong>V2Box</strong> — all versions</li> <li><strong>ktor-client</strong> — all versions</li> </ul> <h3>Usage Instructions</h3> <p><strong>Step 1:</strong> Modify your subscription URL</p> <p style=\"margin-left: 20px;\"> Append <code>/json</code> to the end of your subscription link:<br /> <code style=\"display: inline-block; margin-top: 8px; padding: 8px 12px; background: rgba(0,0,0,0.05); border-radius: 4px;\"> https://&lt;server&gt;/api/sub/xxxx/json </code> </p> <p><strong>Step 2:</strong> Verify compatibility</p> <p style=\"margin-left: 20px;\"> Ensure your client application meets the minimum version requirements listed above. </p> <p><strong>Alternatively:</strong> Enable JSON At the base path</p> <p style=\"margin-left: 20px;\"> Enable the \"Serve JSON at base subscription\" option in the subscription settings. This will serve the JSON subscription at the base subscription path (without having to append /json). </p> <h3>Fallback Behavior</h3> <p> For clients that don't support the JSON format (such as Base64 or Mihomo-based clients), the subscription will automatically fall back to the standard format compatible with your client. </p>",
+            "unknown-screen-provided": "Unknown screen provided.",
+            "loading-help-drawer": "Loading help drawer..."
+        }
+    },
+    "help-action-icon": {
+        "shared": {
+            "help-article": "Help Article"
+        }
     }
 }

public/locales/en/remnawave.json

@@ -7,15 +7,18 @@
         100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
     );
 
-    background: light-dark(
-        linear-gradient(135deg, var(--mantine-color-gray-0) 0%, var(--mantine-color-gray-1) 100%),
-        linear-gradient(135deg, var(--mantine-color-dark-8) 0%, var(--mantine-color-dark-7) 100%)
+    background: linear-gradient(
+        135deg,
+        var(--mantine-color-dark-8) 0%,
+        var(--mantine-color-dark-7) 100%
     );
 
     box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.1),
-        0 2px 8px rgba(0, 0, 0, 0.05),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        0 1px 1px hsl(0deg 0% 0% / 0.075),
+        0 2px 2px hsl(0deg 0% 0% / 0.075),
+        0 4px 4px hsl(0deg 0% 0% / 0.075),
+        0 8px 8px hsl(0deg 0% 0% / 0.075),
+        0 16px 16px hsl(0deg 0% 0% / 0.075);
 
     border-radius: var(--mantine-radius-lg);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -25,6 +28,16 @@
     }
 }
 
+.sidebarWrapperClosedDesktop {
+    margin-left: 0;
+    box-shadow: none;
+}
+
+.sidebarWrapperClosedMobile {
+    margin-left: 0;
+    box-shadow: none;
+}
+
 .sidebarWrapper::before {
     content: '';
     position: absolute;
@@ -123,3 +136,16 @@
         transparent 100%
     );
 }
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.appShellFadeIn {
+    animation: fadein 0.2s ease-out;
+}

src/app/layouts/dashboard/main-layout/Main.module.css

@@ -1,25 +1,21 @@
 import { useClickOutside, useDisclosure, useHeadroom, useMediaQuery } from '@mantine/hooks'
 import { AppShell, Box, Burger, Container, Group, ScrollArea } from '@mantine/core'
-import { useQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { Outlet } from 'react-router-dom'
-import axios from 'axios'
+import clsx from 'clsx'
 
+import { useIsLoadingRemnawaveUpdates, useRemnawaveInfo } from '@entities/dashboard/updates-store'
 import { ScrollToTopWrapper } from '@shared/hocs/scroll-to-top/scroll-to-top'
-import { useGetAuthStatus } from '@shared/api/hooks/auth/auth.query.hooks'
 import { SidebarTitleShared } from '@shared/ui/sidebar/sidebar-title'
 import { SidebarLogoShared } from '@shared/ui/sidebar/sidebar-logo'
 import { HeaderControls } from '@shared/ui/header-buttons'
+import { HelpDrawerShared } from '@shared/ui/help-drawer'
 import { VersionBadgeShared } from '@shared/ui/sidebar'
-import { sToMs } from '@shared/utils/time-utils'
-import { LoadingScreen } from '@shared/ui'
 
 import { Navigation } from './navbar/navigation.layout'
 import classes from './Main.module.css'
 
 export function MainLayout() {
-    const { data: authStatus, isLoading: isAuthStatusLoading } = useGetAuthStatus()
-
     const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()
     const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true)
     const [isMediaQueryReady, setIsMediaQueryReady] = useState(false)
@@ -32,6 +28,9 @@ export function MainLayout() {
         getInitialValueInEffect: false
     })
 
+    const remnawaveInfo = useRemnawaveInfo()
+    const isLoadingUpdates = useIsLoadingRemnawaveUpdates()
+
     useEffect(() => {
         setIsMediaQueryReady(true)
     }, [isMobile, isSocialButton])
@@ -42,36 +41,21 @@ export function MainLayout() {
         }
     })
 
-    const { data, isLoading: isGithubLoading } = useQuery({
-        queryKey: ['github-stars'],
-        staleTime: sToMs(3600),
-        refetchInterval: sToMs(3600),
-        queryFn: async () => {
-            const response = await axios.get<{
-                totalStars: number
-            }>('https://ungh.cc/stars/remnawave/*')
-            return response.data
-        }
-    })
-
-    if (isAuthStatusLoading) {
-        return <LoadingScreen height="100vh" />
-    }
-
     if (!isMediaQueryReady) {
         return <div style={{ height: '100vh' }}></div>
     }
 
     return (
         <AppShell
+            className={classes.appShellFadeIn}
             header={{ height: 64, collapsed: isMobile ? false : !pinned, offset: false }}
             layout="alt"
             navbar={{
                 width: 300,
                 breakpoint: 'lg',
                 collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }
             }}
-            padding="xl"
+            padding={isMobile ? 'md' : 'xl'}
             transitionDuration={500}
             transitionTimingFunction="ease-in-out"
         >
@@ -88,8 +72,8 @@ export function MainLayout() {
                         <Group style={{ flexShrink: 0 }}>
                             <HeaderControls
                                 githubLink="https://github.com/remnawave/panel"
-                                isGithubLoading={isGithubLoading}
-                                stars={data?.totalStars}
+                                isGithubLoading={isLoadingUpdates}
+                                stars={remnawaveInfo.starsCount || undefined}
                                 telegramLink="https://t.me/remnawave"
                                 withGithub={!isSocialButton}
                                 withSupport={!isSocialButton}
@@ -100,7 +84,10 @@ export function MainLayout() {
                 </Container>
             </AppShell.Header>
             <AppShell.Navbar
-                className={classes.sidebarWrapper}
+                className={clsx(classes.sidebarWrapper, {
+                    [classes.sidebarWrapperClosedDesktop]: !isMobile && !desktopOpened,
+                    [classes.sidebarWrapperClosedMobile]: isMobile && !mobileOpened
+                })}
                 p="md"
                 pb={0}
                 ref={ref}
@@ -117,9 +104,12 @@ export function MainLayout() {
                         />
                     </Box>
 
-                    <Group gap="xs" justify="center" w="100%">
-                        <SidebarLogoShared logoUrl={authStatus?.branding.logoUrl} />
-                        <SidebarTitleShared title={authStatus?.branding.title} />
+                    <Group gap="xs" justify={isMobile ? 'center' : 'space-between'} w="100%">
+                        <Group gap={4}>
+                            <SidebarLogoShared />
+                            <SidebarTitleShared />
+                        </Group>
+
                         {!isMobile && <VersionBadgeShared />}
                     </Group>
 
@@ -143,8 +133,8 @@ export function MainLayout() {
                         <Group justify="center" mt="md" style={{ flexShrink: 0 }}>
                             <HeaderControls
                                 githubLink="https://github.com/remnawave/panel"
-                                isGithubLoading={isGithubLoading}
-                                stars={data?.totalStars}
+                                isGithubLoading={isLoadingUpdates}
+                                stars={remnawaveInfo.starsCount || undefined}
                                 telegramLink="https://t.me/remnawave"
                                 withLanguage={false}
                                 withLogout={false}
@@ -154,10 +144,14 @@ export function MainLayout() {
                     )}
                 </AppShell.Section>
             </AppShell.Navbar>
-            <AppShell.Main pb="var(--mantine-spacing-md)" pt="var(--app-shell-header-height)">
+            <AppShell.Main
+                pb="var(--mantine-spacing-md)"
+                pt="calc(var(--app-shell-header-height) + 10px)"
+            >
                 <ScrollToTopWrapper>
                     <Outlet />
                 </ScrollToTopWrapper>
+                <HelpDrawerShared />
             </AppShell.Main>
         </AppShell>
     )

src/app/layouts/dashboard/main-layout/main.layout.tsx

@@ -2,14 +2,17 @@ import { ElementType } from 'react'
 
 export interface MenuItem {
     header?: string
+    id?: string
     section: {
         dropdownItems?: {
             href: string
             icon?: ElementType
+            id: string
             name: string
         }[]
         href: string
         icon: ElementType
+        id: string
         name: string
         newTab?: boolean
     }[]