add voice button in TopBar

src/renderer/components/TopBar.tsx

@@ -509,14 +509,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     selectedTab === 3 ? theme.launcher.topbar.tabActive : null,
                   ]}
                 />
-                <Tab
-                  label="Голосовой чат"
-                  disableRipple={true}
-                  sx={[
-                    ...tabBaseSx,
-                    selectedTab === 4 ? theme.launcher.topbar.tabActive : null,
-                  ]}
-                />
               </Tabs>
             </CustomTooltip>
           </Box>
@@ -614,8 +606,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                   bottom: 0,
                   height: '0.15vw',
                   borderRadius: '999px',
-                  background:
-                    'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
+                  // background:
+                  //   'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
                   opacity: 0.9,
                 },
               }}
@@ -625,6 +617,69 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
             </Button>
           </CustomTooltip>
         )}
+        <Button
+          onClick={() => navigate('/voice')}
+          disableRipple
+          disableFocusRipple
+          sx={{
+            minWidth: 'unset',
+            width: '3vw',
+            height: '3vw',
+            borderRadius: '3vw',
+
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            overflow: 'hidden',
+
+            px: '0.8vw',
+
+            background:
+              'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)',
+            border: '1px solid rgba(255,255,255,0.10)',
+            boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)',
+            color: 'white',
+            backdropFilter: 'blur(14px)',
+
+            transition: 'all 0.3s ease',
+
+            '& .quick-text': {
+              opacity: 0,
+              whiteSpace: 'nowrap',
+              marginRight: '0.6vw',
+              fontSize: '0.9vw',
+              fontFamily: 'Benzin-Bold',
+              transform: 'translateX(10px)',
+              transition: 'all 0.25s ease',
+            },
+
+            '&:hover': {
+              width: '16.5vw',
+              transform: 'scale(1.05)',
+
+              '& .quick-text': {
+                opacity: 1,
+                transform: 'translateX(0)',
+              },
+            },
+
+            '&:after': {
+              content: '""',
+              position: 'absolute',
+              left: '0%',
+              right: '0%',
+              bottom: 0,
+              height: '0.15vw',
+              borderRadius: '999px',
+              // background:
+              //   'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
+              opacity: 0.9,
+            },
+          }}
+        >
+          <span className="quick-text">Голосовой чат</span>
+          <span style={{ fontSize: '1vw' }}>🎙️</span>
+        </Button>
         {!isLoginPage && !isRegistrationPage && username && (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
             <HeadAvatar