ya xyi znaet che pisat, zaebalsya pridymivat

src/renderer/pages/VersionsExplorer.tsx

@@ -25,14 +25,20 @@ interface VersionCardProps {
   imageUrl: string;
   version: string;
   onSelect: (id: string) => void;
+  isHovered: boolean;
+  onHover: (id: string | null) => void;
+  hoveredCardId: string | null;
 }
 
-const VersionCard: React.FC<VersionCardProps> = ({
+export const VersionCard: React.FC<VersionCardProps> = ({
   id,
   name,
   imageUrl,
   version,
   onSelect,
+  isHovered,
+  onHover,
+  hoveredCardId,
 }) => {
   return (
     <Card
@@ -47,11 +53,19 @@ const VersionCard: React.FC<VersionCardProps> = ({
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
         overflow: 'hidden',
         cursor: 'pointer',
+        filter: hoveredCardId && !isHovered ? 'blur(5px)' : 'blur(0px)',
+        transform: isHovered ? 'scale(1.03)' : 'scale(1)',
+        zIndex: isHovered ? 10 : 1,
+        '&:hover': {
+          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+        },
       }}
       onClick={() => onSelect(id)}
+      onMouseEnter={() => onHover(id)}
+      onMouseLeave={() => onHover(null)}
     >
       <CardContent
         sx={{
@@ -125,6 +139,7 @@ export const VersionsExplorer = () => {
   const [loading, setLoading] = useState(true);
   const [modalOpen, setModalOpen] = useState(false);
   const [downloadLoading, setDownloadLoading] = useState<string | null>(null);
+  const [hoveredCardId, setHoveredCardId] = useState<string | null>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -220,13 +235,21 @@ export const VersionsExplorer = () => {
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
         cursor: 'pointer',
+        filter: 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)',
+        },
       }}
       onClick={handleAddVersion}
+      onMouseEnter={() => setHoveredCardId('add')}
+      onMouseLeave={() => setHoveredCardId(null)}
     >
       <AddIcon sx={{ fontSize: 60, color: '#fff' }} />
       <Typography
@@ -256,8 +279,24 @@ export const VersionsExplorer = () => {
         alignItems: 'center',
         paddingLeft: '5vw',
         paddingRight: '5vw',
+        position: 'relative',
       }}
     >
+      {/* Глобальный фоновый слой для размытия всего интерфейса */}
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backdropFilter: hoveredCardId ? 'blur(10px)' : 'blur(0)',
+          transition: 'backdrop-filter 0.3s ease-in-out',
+          zIndex: 5,
+          pointerEvents: 'none',
+        }}
+      />
+
       {loading ? (
         <Box display="flex" justifyContent="center" my={5}>
           <CircularProgress />
@@ -270,6 +309,8 @@ export const VersionsExplorer = () => {
             width: '100%',
             overflowY: 'auto',
             justifyContent: 'center',
+            position: 'relative',
+            zIndex: 6, // Выше чем фоновый слой размытия
           }}
         >
           {/* Показываем установленные версии или дефолтную, если она есть */}
@@ -288,6 +329,9 @@ export const VersionsExplorer = () => {
                   }
                   version={version.version}
                   onSelect={() => handleSelectVersion(version)}
+                  isHovered={hoveredCardId === version.id}
+                  onHover={setHoveredCardId}
+                  hoveredCardId={hoveredCardId}
                 />
               </Grid>
             ))