feat: add Steam installation dialog and integrate with game launch process

Author: flavioislima

public/locales/en/translation.json

@@ -1131,6 +1131,12 @@
         "processing": "Processing files, please wait"
     },
     "steam": {
+        "install": {
+            "later": "Install Later",
+            "launch": "Launch Steam",
+            "message": "Please install this game from Steam and refresh the library afterwards to play on HyperPlay.",
+            "title": "Install from Steam"
+        },
         "integration": {
             "requirements": {
                 "part1": "To ensure this integration works properly and HyperPlay can access your games, you must have",

src/frontend/components/UI/DialogHandler/components/MessageBoxModal/showSteamInstallDialog.ts

@@ -0,0 +1,33 @@
+import { DialogType, ButtonOptions } from 'common/types'
+import { DialogModalOptions } from 'frontend/types'
+import { TFunction } from 'i18next'
+
+export function showSteamInstallDialog(
+  showDialogModal: (options: DialogModalOptions) => void,
+  t: TFunction,
+  appName: string
+) {
+  showDialogModal({
+    type: 'MESSAGE',
+    title: t('steam.install.title', 'Install from Steam'),
+    message: t(
+      'steam.install.message',
+      'Please install this game from Steam and refresh the library afterwards to play on HyperPlay.'
+    ),
+    buttons: [
+      {
+        text: t('steam.install.launch', 'Launch Steam'),
+        onClick: () => window.api.openExternalUrl(`steam://install/${appName}`)
+      },
+      {
+        text: t('steam.install.later', 'Install Later'),
+        onClick: () => {}
+      }
+    ]
+  } as {
+    type: DialogType
+    title: string
+    message: string
+    buttons: ButtonOptions[]
+  })
+}

src/frontend/screens/Game/GamePage/index.tsx

@@ -20,6 +20,7 @@ import {
 import { NavLink, useLocation, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
+
 import { UpdateComponent, SelectField } from 'frontend/components/UI'
 import walletStore from 'frontend/state/WalletState'
 import onboardingStore from 'frontend/store/OnboardingStore'
@@ -69,6 +70,7 @@ import libraryState from 'frontend/state/libraryState'
 import DMQueueState from 'frontend/state/DMQueueState'
 import { useEstimatedUncompressedSize } from 'frontend/hooks/useEstimatedUncompressedSize'
 import authState from 'frontend/state/authState'
+import { showSteamInstallDialog } from 'frontend/components/UI/DialogHandler/components/MessageBoxModal/showSteamInstallDialog'
 
 type locationState = {
   fromDM?: boolean
@@ -966,8 +968,7 @@ export default observer(function GamePage(): React.JSX.Element | null {
 
   async function mainAction(is_installed: boolean) {
     if (isSteam) {
-      window.api.openExternalUrl(`steam://install/${appName}`)
-      return
+      return showSteamInstallDialog(showDialogModal, t, appName)
     }
 
     // resume download

src/frontend/screens/Library/components/GameCard/index.tsx

@@ -28,6 +28,7 @@ import libraryState from 'frontend/state/libraryState'
 import DMQueueState from 'frontend/state/DMQueueState'
 import authState from 'frontend/state/authState'
 import { getImageFormattingForArtSquare } from 'frontend/screens/Game/GamePicture'
+import { showSteamInstallDialog } from 'frontend/components/UI/DialogHandler/components/MessageBoxModal/showSteamInstallDialog'
 
 interface Card {
   buttonClick: () => void
@@ -435,8 +436,7 @@ const GameCard = ({
 
   async function mainAction(runner: Runner) {
     if (runner === 'steam') {
-      window.api.openExternalUrl(`steam://install/${appName}`)
-      return
+      return showSteamInstallDialog(showDialogModal, t, appName)
     }
 
     if (isInstalling || isExtracting || isPaused) {

src/frontend/screens/Library/index.tsx

@@ -9,6 +9,7 @@ import React, {
 import { UpdateComponent } from 'frontend/components/UI'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
+import { showSteamInstallDialog } from 'frontend/components/UI/DialogHandler/components/MessageBoxModal/showSteamInstallDialog'
 import GamesList from './components/GamesList'
 import { FilterItem, GameInfo, Runner } from 'common/types'
 import ErrorComponent from 'frontend/components/UI/ErrorComponent'
@@ -37,7 +38,7 @@ type ModalState = {
 }
 
 export default observer(function Library(): React.JSX.Element {
-  const { layout, epic, gog, platform, connectivity } =
+  const { layout, epic, gog, platform, connectivity, showDialogModal } =
     useContext(ContextProvider)
   const { t } = useTranslation()
 
@@ -112,7 +113,7 @@ export default observer(function Library(): React.JSX.Element {
     gameInfo: GameInfo | null
   ) {
     if (runner === 'steam') {
-      return window.api.openExternalUrl(`steam://install/${appName}`)
+      return showSteamInstallDialog(showDialogModal, t, appName)
     }
     setShowModal({ game: appName, show: true, runner, gameInfo })
   }