[Release] 2.17.0 Franky (#4549)

* fix: log screen

* fix: games with launch options

* feat: add eslint-plugin-react-hooks for improved React hooks linting

* fix: dialog padding

* fix: update LaunchOptions component initialization and remove duplicate instance

* fix: update stable version name in package.json

* fix: remove unused launch options section from gamepage.json

* fix: logs truncated position

* fix: lint

* fix: update electron to version 36.2.1

* fix: correct typo in welcome message for library tour

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>

Author: flavioislima

eslint.config.mjs

@@ -3,6 +3,7 @@
 import eslint from '@eslint/js'
 import tseslint from 'typescript-eslint'
 import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
 import prettier from 'eslint-config-prettier'
 import importPlugin from 'eslint-plugin-import-x'
 
@@ -14,6 +15,9 @@ export default tseslint.config(
   {
     files: ['**/*.ts', '**/*.tsx'],
     rules: {
+      // React hooks rules
+      'react-hooks/rules-of-hooks': 'warn',
+
       // FIXME: All of these rules should be errors instead
       '@typescript-eslint/no-base-to-string': 'warn',
       '@typescript-eslint/no-floating-promises': 'warn',
@@ -39,7 +43,8 @@ export default tseslint.config(
     },
 
     plugins: {
-      import: importPlugin
+      import: importPlugin,
+      'react-hooks': reactHooks
     },
     languageOptions: {
       parserOptions: {

package.json

@@ -2,7 +2,7 @@
   "name": "heroic",
   "version": "2.17.0",
   "versionNames": {
-    "stable": "Scopper Gaban",
+    "stable": "Cutty Flam Franky",
     "beta": "Caesar Clown"
   },
   "private": false,
@@ -132,13 +132,14 @@
     "@types/tmp": "^0.2.6",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "cross-env": "^7.0.3",
-    "electron": "^36.1.0",
+    "electron": "^36.2.1",
     "electron-builder": "^26.0.12",
     "electron-vite": "^3.1.0",
     "eslint": "^9.25.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import-x": "^3.1.0",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "fast-xml-parser": "^4.5.3",
     "husky": "^8.0.3",
     "i18next-parser": "^9.3.0",

pnpm-lock.yaml

@@ -210,9 +210,6 @@
         },
         "winetricks": "Installing Winetricks Packages"
     },
-    "launch": {
-        "options": "Launch Options..."
-    },
     "modifyInstall": {
         "dlcsCollapsible": "DLC",
         "nodlcs": "No DLC available",

public/locales/en/gamepage.json

@@ -911,7 +911,7 @@
             "viewToggle": "Switch between grid and list view for your games.",
             "welcome": {
                 "intro": "Welcome to the Heroic Library! This is where you can see all your games across different stores.",
-                "intro2": "If the library is empty, make sure to login with your accounts usinge the Manage accounts on the sidebar or add your own games using the Add Game button above.",
+                "intro2": "If the library is empty, make sure to login with your accounts using the Manage accounts on the sidebar or add your own games using the Add Game button above.",
                 "title": "Welcome to Heroic!",
                 "title2": "Managing the library!"
             }

public/locales/en/translation.json

@@ -112,6 +112,5 @@
   display: flex;
   gap: 16px;
   justify-content: end;
-  padding: 0 var(--dialog-margin-horizontal) var(--dialog-margin-vertical)
-    var(--dialog-margin-horizontal);
+  padding-top: var(--space-md);
 }

src/frontend/components/UI/Dialog/index.css

@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import GameContext from '../../GameContext'
 import { GameInfo, LaunchOption } from 'common/types'
-import { useTranslation } from 'react-i18next'
 import { SelectField } from 'frontend/components/UI'
 import { MenuItem } from '@mui/material'
 
@@ -11,23 +10,14 @@ interface Props {
 }
 
 const LaunchOptions = ({ gameInfo, setLaunchArguments }: Props) => {
-  const { t } = useTranslation('gamepage')
   const { appName, runner } = useContext(GameContext)
   const [launchOptions, setLaunchOptions] = useState<LaunchOption[]>([])
-  const [selectedLaunchOptionIndex, setSelectedLaunchOptionIndex] = useState(-1)
+  const [selectedLaunchOptionIndex, setSelectedLaunchOptionIndex] = useState(0)
 
   useEffect(() => {
-    window.api.getLaunchOptions(appName, runner).then(setLaunchOptions)
+    void window.api.getLaunchOptions(appName, runner).then(setLaunchOptions)
   }, [gameInfo])
 
-  if (!gameInfo.is_installed) {
-    return null
-  }
-
-  if (!launchOptions.length) {
-    return null
-  }
-
   const labelForLaunchOption = useCallback((option: LaunchOption) => {
     switch (option.type) {
       case undefined:
@@ -40,6 +30,14 @@ const LaunchOptions = ({ gameInfo, setLaunchArguments }: Props) => {
     }
   }, [])
 
+  if (!gameInfo.is_installed) {
+    return null
+  }
+
+  if (!launchOptions.length) {
+    return null
+  }
+
   return (
     <SelectField
       htmlId="launch_options"
@@ -54,7 +52,6 @@ const LaunchOptions = ({ gameInfo, setLaunchArguments }: Props) => {
         }
       }}
       value={selectedLaunchOptionIndex.toString()}
-      prompt={t('launch.options', 'Launch Options...')}
     >
       {launchOptions.map((option, index) => (
         <MenuItem key={index} value={index}>

src/frontend/screens/Game/GamePage/components/LaunchOptions.tsx

@@ -434,17 +434,17 @@ export default React.memo(function GamePage(): JSX.Element | null {
                       handleUpdate={handleUpdate}
                       hasUpdate={hasUpdate}
                     />
+                    <LaunchOptions
+                      gameInfo={gameInfo}
+                      setLaunchArguments={setLaunchArguments}
+                    />
                     <div className="buttons">
                       <MainButton
                         gameInfo={gameInfo}
                         handlePlay={handlePlay}
                         handleInstall={handleInstall}
                       />
                     </div>
-                    <LaunchOptions
-                      gameInfo={gameInfo}
-                      setLaunchArguments={setLaunchArguments}
-                    />
                     {wikiLink}
                   </div>
                 </div>

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

@@ -34,7 +34,7 @@ const LibraryTour: React.FC = () => {
     {
       intro: t(
         'tour.library.welcome.intro2',
-        'If the library is empty, make sure to login with your accounts usinge the Manage accounts on the sidebar or add your own games using the Add Game button above.'
+        'If the library is empty, make sure to login with your accounts using the Manage accounts on the sidebar or add your own games using the Add Game button above.'
       ),
       title: t('tour.library.welcome.title2', 'Managing the library!')
     }

src/frontend/screens/Library/components/LibraryTour.tsx

@@ -6,7 +6,7 @@
   display: grid;
   grid-template-columns: min-content 1fr;
   grid-template-rows: 1fr;
-  column-gap: 0.5rem;
+  gap: 0.5rem;
   height: 25em;
   width: 100%;
 
@@ -35,6 +35,13 @@
   }
 }
 
+.logs-wrapper.game-log {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  max-width: 50vw;
+}
+
 dialog .logs-wrapper {
   grid-template-columns: 1fr;
   flex-grow: 1;