From 3e62bd7c277067d345ae7274fe9ddf625852e883 Mon Sep 17 00:00:00 2001
From: aurinex <152972480+aurinex@users.noreply.github.com>
Date: Fri, 5 Dec 2025 15:41:44 +0500
Subject: [PATCH] add scroll to TopBar buttons

---
 src/renderer/components/TopBar.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/TopBar.tsx b/src/renderer/components/TopBar.tsx
index 630671e..6ade5c1 100644
--- a/src/renderer/components/TopBar.tsx
+++ b/src/renderer/components/TopBar.tsx
@@ -2,7 +2,7 @@ import { Box, Button, Tab, Tabs, Typography } from '@mui/material';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { useLocation, useNavigate } from 'react-router-dom';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { fetchCoins } from '../api';
 import CustomTooltip from './CustomTooltip';
@@ -35,6 +35,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   const [coins, setCoins] = useState<number>(0);
   const [value, setValue] = useState(0);
   const [activePage, setActivePage] = useState('versions');
+  const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -53,6 +54,23 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
     navigate('/');
   };
 
+  const handleTabsWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+    // чтобы страница не скроллилась вертикально
+    event.preventDefault();
+
+    if (!tabsWrapperRef.current) return;
+
+    // Находим внутренний скроллер MUI Tabs
+    const scroller = tabsWrapperRef.current.querySelector(
+      '.MuiTabs-scroller'
+    ) as HTMLDivElement | null;
+
+    if (!scroller) return;
+
+    // Прокручиваем горизонтально, используя вертикальный скролл мыши
+    scroller.scrollLeft += event.deltaY * 0.3;
+  };
+
   // const getPageTitle = () => {
   //   if (isLoginPage) {
   //     return 'Вход';
@@ -159,6 +177,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
         )}
         {!isLaunchPage && !isRegistrationPage && !isLoginPage && (
           <Box
+            ref={tabsWrapperRef}
+            onWheel={handleTabsWheel}
             sx={{
               borderBottom: 1,
               borderColor: 'transparent',
@@ -171,7 +191,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
               value={value}
               onChange={handleChange}
               aria-label="basic tabs example"
+              variant="scrollable"
+              scrollButtons={false}
               disableRipple={true}
+              sx={{ maxWidth: "42vw"}}
             >
               <Tab
                 label="Версии"