style: adjust hover effects and dimensions for game cards; refine context menu actions

src/renderer/src/components/game-context-menu/game-context-menu.tsx

@@ -70,8 +70,10 @@ export function GameContextMenu({
       onClick: () => {
         if (isGameRunning) {
           void handleCloseGame();
-        } else {
+        } else if (canPlay) {
           void handlePlayGame();
+        } else {
+          handleOpenDownloadOptions();
         }
       },
       disabled: isDeleting,

src/renderer/src/pages/library/library-game-card-large.scss

@@ -40,8 +40,7 @@
   }
 
   &:hover {
-    transform: scale(1.05);
-    transform: translateY(-2px);
+    transform: scale(1.01);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
     border-color: rgba(255, 255, 255, 0.1);
   }
@@ -66,9 +65,9 @@
     bottom: 0;
     background: linear-gradient(
       0deg,
-      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 0.1) 0%,
       rgba(0, 0, 0, 0.2) 50%,
-      rgba(0, 0, 0, 0.5) 100%
+      rgba(0, 0, 0, 0.3) 100%
     );
     z-index: 1;
   }
@@ -154,9 +153,9 @@
 
   &__info-bar {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
     gap: calc(globals.$spacing-unit * 2);
+    justify-content: flex-end;
   }
 
   &__playtime {
@@ -187,7 +186,8 @@
     flex-direction: column;
     gap: 6px;
     padding: 6px 12px;
-    width: 100%;
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
   &__achievement-header {
@@ -261,7 +261,7 @@
     font-size: 14px;
     font-weight: 600;
     transition: all ease 0.2s;
-    flex-shrink: 0;
+    flex: 0 0 auto;
 
     &:hover {
       background: rgba(255, 255, 255, 0.15);

src/renderer/src/pages/library/library-game-card-large.tsx

@@ -9,9 +9,11 @@ import {
   AlertFillIcon,
   ThreeBarsIcon,
   TrophyIcon,
+  XIcon,
 } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import { useCallback, useState } from "react";
+import { useGameActions } from "@renderer/components/game-context-menu/use-game-actions";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { GameContextMenu } from "@renderer/components";
 import "./library-game-card-large.scss";
@@ -66,18 +68,32 @@ export function LibraryGameCardLarge({ game }: LibraryGameCardLargeProps) {
     navigate(buildGameDetailsPath(game));
   };
 
+  const {
+    handlePlayGame,
+    handleOpenDownloadOptions,
+    handleCloseGame,
+    isGameRunning,
+  } = useGameActions(game);
+
   const handleActionClick = async (e: React.MouseEvent) => {
     e.stopPropagation();
 
-    if (game.executablePath) {
-      window.electron.openGame(
-        game.shop,
-        game.objectId,
-        game.executablePath,
-        game.launchOptions
-      );
-    } else {
-      navigate(buildGameDetailsPath(game));
+    if (isGameRunning) {
+      try {
+        await handleCloseGame();
+      } catch (e) {
+        void e;
+      }
+      return;
+    }
+    try {
+      await handlePlayGame();
+    } catch (err) {
+      try {
+        handleOpenDownloadOptions();
+      } catch (e) {
+        void e;
+      }
     }
   };
 
@@ -215,6 +231,11 @@ export function LibraryGameCardLarge({ game }: LibraryGameCardLargeProps) {
                   />
                   {t("downloading")}
                 </>
+              ) : isGameRunning ? (
+                <>
+                  <XIcon size={16} />
+                  {t("close")}
+                </>
               ) : game.executablePath ? (
                 <>
                   <PlayIcon size={16} />

src/renderer/src/pages/library/library-game-card.scss

@@ -37,7 +37,7 @@
     }
 
     &:hover {
-      transform: scale(1.05);
+      transform: scale(1.02);
     }
 
     &:hover::before {
@@ -215,8 +215,8 @@
     -webkit-backdrop-filter: blur(8px);
     border: solid 1px rgba(255, 255, 255, 0.15);
     border-radius: 4px;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;