new style VersionExplorer

src/renderer/pages/VersionsExplorer.tsx

@@ -4,19 +4,15 @@ import {
   Typography,
   Grid,
   Card,
-  CardMedia,
   CardContent,
-  CardActions,
   Button,
   Modal,
   List,
   ListItem,
   ListItemText,
-  IconButton,
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import AddIcon from '@mui/icons-material/Add';
-import DownloadIcon from '@mui/icons-material/Download';
 import { FullScreenLoader } from '../components/FullScreenLoader';
 
 interface VersionCardProps {
@@ -30,10 +26,13 @@ interface VersionCardProps {
   hoveredCardId: string | null;
 }
 
+const gradientPrimary =
+  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
+
 export const VersionCard: React.FC<VersionCardProps> = ({
   id,
   name,
-  imageUrl,
+  imageUrl, // пока не используется, но оставляем для будущего
   version,
   onSelect,
   isHovered,
@@ -43,24 +42,28 @@ export const VersionCard: React.FC<VersionCardProps> = ({
   return (
     <Card
       sx={{
-        backgroundColor: 'rgba(30, 30, 50, 0.8)',
+        background:
-        backdropFilter: 'blur(10px)',
+          'radial-gradient(circle at top left, rgba(242,113,33,0.2), transparent 55%), rgba(10,10,20,0.95)',
+        backdropFilter: 'blur(18px)',
         width: '35vw',
         height: '35vh',
         minWidth: 'unset',
         minHeight: 'unset',
         display: 'flex',
         flexDirection: 'column',
-        borderRadius: '16px',
+        borderRadius: '2.5vw',
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+        border: '1px solid rgba(255,255,255,0.06)',
-        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
+        boxShadow: isHovered
+          ? '0 0 10px rgba(233,64,205,0.55)'
+          : '0 14px 40px rgba(0, 0, 0, 0.6)',
+        transition:
+          'transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease',
         overflow: 'hidden',
         cursor: 'pointer',
-        // filter: hoveredCardId && !isHovered ? 'blur(5px)' : 'blur(0px)', //НЕ БЕЙ МЕНЯ АНДРЕЙ
+        transform: isHovered ? 'scale(1.04)' : 'scale(1)',
-        transform: isHovered ? 'scale(1.03)' : 'scale(1)',
         zIndex: isHovered ? 10 : 1,
         '&:hover': {
-          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+          borderColor: 'rgba(242,113,33,0.8)',
         },
       }}
       onClick={() => onSelect(id)}
@@ -74,7 +77,8 @@ export const VersionCard: React.FC<VersionCardProps> = ({
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
-          height: '10%',
+          gap: '1vh',
+          textAlign: 'center',
         }}
       >
         <Typography
@@ -83,12 +87,24 @@ export const VersionCard: React.FC<VersionCardProps> = ({
           component="div"
           sx={{
             fontWeight: 'bold',
-            color: '#ffffff',
+            fontFamily: 'Benzin-Bold',
-            fontSize: '1.5rem',
+            fontSize: '2vw',
+            backgroundImage: gradientPrimary,
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
           }}
         >
           {name}
         </Typography>
+        <Typography
+          variant="subtitle1"
+          sx={{
+            color: 'rgba(255,255,255,0.8)',
+            fontSize: '1.1vw',
+          }}
+        >
+          Версия {version}
+        </Typography>
       </CardContent>
     </Card>
   );
@@ -168,7 +184,6 @@ export const VersionsExplorer = () => {
         }
       } catch (error) {
         console.error('Ошибка при загрузке версий:', error);
-        // Можно добавить обработку ошибки, например показать уведомление
       } finally {
         setLoading(false);
       }
@@ -181,10 +196,8 @@ export const VersionsExplorer = () => {
     const cfg: any = (version as any).config;
 
     if (cfg && (cfg.downloadUrl || cfg.apiReleaseUrl)) {
-      // Версия из Gist — у неё есть нормальный config
       localStorage.setItem('selected_version_config', JSON.stringify(cfg));
     } else {
-      // Установленная версия без config — не засоряем localStorage пустым объектом
       localStorage.removeItem('selected_version_config');
     }
 
@@ -203,7 +216,6 @@ export const VersionsExplorer = () => {
     try {
       setDownloadLoading(version.id);
 
-      // Скачивание и установка выбранной версии
       const downloadResult = await window.electron.ipcRenderer.invoke(
         'download-and-extract',
         {
@@ -216,7 +228,6 @@ export const VersionsExplorer = () => {
       );
 
       if (downloadResult?.success) {
-        // Добавляем скачанную версию в список установленных
         setInstalledVersions((prev) => [...prev, version]);
         setModalOpen(false);
       }
@@ -231,49 +242,42 @@ export const VersionsExplorer = () => {
   const AddVersionCard = () => (
     <Card
       sx={{
-        backgroundColor: 'rgba(30, 30, 50, 0.8)',
+        background:
-        // backdropFilter: 'blur(10px)',
+          'radial-gradient(circle at top left, rgba(233,64,205,0.3), rgba(10,10,20,0.95))',
         width: '35vw',
         height: '35vh',
-        minWidth: 'unset',
-        minHeight: 'unset',
         display: 'flex',
         flexDirection: 'column',
-        borderRadius: '16px',
+        borderRadius: '2.5vw',
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+        border: '1px dashed rgba(255,255,255,0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
+        boxShadow: '0 14px 40px rgba(0, 0, 0, 0.6)',
+        transition: 'transform 0.35s ease, box-shadow 0.35s ease',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
         cursor: 'pointer',
-        // filter:
+        transform: hoveredCardId === 'add' ? 'scale(1.04)' : 'scale(1)',
-        //   hoveredCardId && hoveredCardId !== 'add' ? 'blur(5px)' : 'blur(0)', //НЕ БЕЙ МЕНЯ АНДРЕЙ
-        transform: hoveredCardId === 'add' ? 'scale(1.03)' : 'scale(1)',
         zIndex: hoveredCardId === 'add' ? 10 : 1,
         '&:hover': {
-          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+          boxShadow: '0 0 40px rgba(242,113,33,0.7)',
+          borderStyle: 'solid',
         },
       }}
       onClick={handleAddVersion}
       onMouseEnter={() => setHoveredCardId('add')}
       onMouseLeave={() => setHoveredCardId(null)}
     >
-      <AddIcon sx={{ fontSize: 60, color: '#fff' }} />
+      <AddIcon sx={{ fontSize: '4vw', color: '#fff' }} />
       <Typography
         variant="h6"
         sx={{
           color: '#fff',
+          fontFamily: 'Benzin-Bold',
+          fontSize: '1.5vw',
+          mt: 1,
         }}
       >
-        Добавить
+        Добавить версию
-      </Typography>
-      <Typography
-        variant="h6"
-        sx={{
-          color: '#fff',
-        }}
-      >
-        версию
       </Typography>
     </Card>
   );
@@ -292,20 +296,51 @@ export const VersionsExplorer = () => {
         overflow: 'hidden',
       }}
     >
-      {/* Глобальный фоновый слой для размытия всего интерфейса */}
+      {/* Заголовок страницы в стиле Registration */}
       <Box
+        sx={{
+          mt: '7vh',
+          mb: '1vh',
+          textAlign: 'center',
+        }}
+      >
+        <Typography
+          variant="h3"
+          sx={{
+            fontFamily: 'Benzin-Bold',
+            fontSize: '3vw',
+            backgroundImage: gradientPrimary,
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          Выбор версии клиента
+        </Typography>
+        <Typography
+          variant="subtitle1"
+          sx={{
+            color: 'rgba(255,255,255,0.7)',
+            mt: 1,
+          }}
+        >
+          Выберите установленную версию или добавьте новую сборку
+        </Typography>
+      </Box>
+
+      {/* Глобальный фоновый слой (мягкий эффект) */}
+      {/* <Box
         sx={{
           position: 'fixed',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          // backdropFilter: hoveredCardId ? 'blur(10px)' : 'blur(0)', //НЕ БЕЙ МЕНЯ АНДРЕЙ
+          background:
-          transition: 'backdrop-filter 0.3s ease-in-out',
+            'radial-gradient(circle at top, rgba(242,113,33,0.12), transparent 55%)',
-          zIndex: 5,
           pointerEvents: 'none',
+          zIndex: 0,
         }}
-      />
+      /> */}
 
       {loading ? (
         <FullScreenLoader message="Загрузка ваших версий..." />
@@ -318,13 +353,12 @@ export const VersionsExplorer = () => {
             height: '100%',
             overflowY: 'auto',
             justifyContent: 'center',
-            alignContent: 'center',
+            alignContent: 'flex-start',
             position: 'relative',
-            zIndex: 6,
+            zIndex: 1,
-            padding: '2vh 0',
+            pt: '3vh',
           }}
         >
-          {/* Показываем установленные версии или дефолтную, если она есть */}
           {installedVersions.length > 0 ? (
             installedVersions.map((version) => (
               <Grid
@@ -355,7 +389,6 @@ export const VersionsExplorer = () => {
               </Grid>
             ))
           ) : (
-            // Если нет ни одной версии, показываем карточку добавления
             <Grid
               item
               xs={12}
@@ -371,7 +404,6 @@ export const VersionsExplorer = () => {
             </Grid>
           )}
 
-          {/* Всегда добавляем карточку для добавления новых версий */}
           {installedVersions.length > 0 && (
             <Grid
               item
@@ -403,21 +435,30 @@ export const VersionsExplorer = () => {
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
-            width: 400,
+            width: 420,
+            maxWidth: '90vw',
             maxHeight: '80vh',
             overflowY: 'auto',
-            background: 'linear-gradient(45deg, #000000 10%, #3b4187 184.73%)',
+            background: 'linear-gradient(145deg, #000000 10%, #8A2387 100%)',
-            border: '2px solid #000',
+            border: '1px solid rgba(255,255,255,0.16)',
-            boxShadow: 24,
+            boxShadow: '0 20px 60px rgba(0,0,0,0.85)',
             p: 4,
-            borderRadius: '3vw',
+            borderRadius: '2.5vw',
-            gap: '1vh',
+            gap: '1.5vh',
             display: 'flex',
             flexDirection: 'column',
-            backdropFilter: 'blur(10px)',
+            backdropFilter: 'blur(18px)',
           }}
         >
-          <Typography variant="h6" component="h2" sx={{ color: '#fff' }}>
+          <Typography
+            variant="h6"
+            component="h2"
+            sx={{
+              color: '#fff',
+              fontFamily: 'Benzin-Bold',
+              mb: 1,
+            }}
+          >
             Доступные версии для скачивания
           </Typography>
 
@@ -426,17 +467,22 @@ export const VersionsExplorer = () => {
               Загрузка доступных версий...
             </Typography>
           ) : (
-            <List sx={{ mt: 2 }}>
+            <List sx={{ mt: 1 }}>
               {availableVersions.map((version) => (
                 <ListItem
                   key={version.id}
                   sx={{
-                    borderRadius: '8px',
+                    borderRadius: '1vw',
                     mb: 1,
-                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                    backgroundColor: 'rgba(0, 0, 0, 0.35)',
+                    border: '1px solid rgba(255,255,255,0.08)',
                     cursor: 'pointer',
+                    transition:
+                      'background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease',
                     '&:hover': {
-                      backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                      backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                      transform: 'translateY(-2px)',
+                      boxShadow: '0 8px 24px rgba(0,0,0,0.6)',
                     },
                   }}
                   onClick={() => handleSelectVersion(version)}
@@ -444,11 +490,22 @@ export const VersionsExplorer = () => {
                   <ListItemText
                     primary={version.name}
                     secondary={version.version}
-                    primaryTypographyProps={{ color: '#fff' }}
+                    primaryTypographyProps={{
+                      color: '#fff',
+                      fontFamily: 'Benzin-Bold',
+                    }}
                     secondaryTypographyProps={{
                       color: 'rgba(255,255,255,0.7)',
                     }}
                   />
+                  {downloadLoading === version.id && (
+                    <Typography
+                      variant="body2"
+                      sx={{ color: 'rgba(255,255,255,0.7)' }}
+                    >
+                      Загрузка...
+                    </Typography>
+                  )}
                 </ListItem>
               ))}
             </List>
@@ -456,15 +513,20 @@ export const VersionsExplorer = () => {
 
           <Button
             onClick={handleCloseModal}
-            variant="outlined"
+            variant="contained"
             sx={{
               mt: 3,
               alignSelf: 'center',
-              borderColor: '#fff',
+              px: 6,
-              color: '#fff',
+              py: 1.2,
+              borderRadius: '2.5vw',
+              background: gradientPrimary,
+              fontFamily: 'Benzin-Bold',
+              fontSize: '1vw',
+              textTransform: 'none',
               '&:hover': {
-                borderColor: '#ccc',
+                transform: 'scale(1.05)',
-                backgroundColor: 'rgba(255,255,255,0.1)',
+                boxShadow: '0 10px 30px rgba(0,0,0,0.6)',
               },
             }}
           >