[UI/UX] Use Tabs on Game Settings

src/backend/main.ts

@@ -625,7 +625,7 @@ ipcMain.handle('callTool', async (event, { tool, exe, appName, runner }) => {
       await Winetricks.run(runner, appName, event)
       break
     case 'winecfg':
-      runWineCommandOnGame(runner, appName, {
+      await runWineCommandOnGame(runner, appName, {
         gameSettings,
         commandParts: ['winecfg'],
         wait: false
@@ -634,7 +634,7 @@ ipcMain.handle('callTool', async (event, { tool, exe, appName, runner }) => {
     case 'runExe':
       if (exe) {
         const workingDir = path.parse(exe).dir
-        runWineCommandOnGame(runner, appName, {
+        await runWineCommandOnGame(runner, appName, {
           gameSettings,
           commandParts: [exe],
           wait: false,

src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx

@@ -213,18 +213,23 @@ export default function SidebarLinks() {
             >
               <span>{t('settings.navbar.general')}</span>
             </NavLink>
-            <NavLink
-              role="link"
-              to={`/settings/${runner}/${appName}/games_settings`}
-              state={{ ...state, runner: state?.runner }}
-              className={classNames('Sidebar__item SidebarLinks__subItem', {
-                ['active']: type === 'games_settings'
-              })}
-            >
-              <span>
-                {t('settings.navbar.games_settings_defaults', 'Game Defaults')}
-              </span>
-            </NavLink>
+            {!isWin && (
+              <NavLink
+                role="link"
+                to={`/settings/${runner}/${appName}/games_settings`}
+                state={{ ...state, runner: state?.runner }}
+                className={classNames('Sidebar__item SidebarLinks__subItem', {
+                  ['active']: type === 'games_settings'
+                })}
+              >
+                <span>
+                  {t(
+                    'settings.navbar.games_settings_defaults',
+                    'Game Defaults'
+                  )}
+                </span>
+              </NavLink>
+            )}
             <NavLink
               role="link"
               to={`/settings/${runner}/${appName}/advanced`}

src/frontend/screens/Settings/components/BattlEyeRuntime.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ToggleSwitch } from 'frontend/components/UI'
 import useSetting from 'frontend/hooks/useSetting'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 const BattlEyeRuntime = () => {
   const { t } = useTranslation()
@@ -12,6 +13,11 @@ const BattlEyeRuntime = () => {
     'battlEyeRuntime',
     false
   )
+  const { platform } = useContext(ContextProvider)
+
+  if (platform !== 'linux') {
+    return null
+  }
 
   const handleBattlEyeRuntime = async () => {
     if (!battlEyeRuntime) {

src/frontend/screens/Settings/components/EacRuntime.tsx

@@ -11,7 +11,11 @@ const EacRuntime = () => {
   const [installing, setInstalling] = useState(false)
   const [eacRuntime, setEacRuntime] = useSetting('eacRuntime', false)
   const [useGameMode, setUseGameMode] = useSetting('useGameMode', false)
-  const { showDialogModal } = useContext(ContextProvider)
+  const { showDialogModal, platform } = useContext(ContextProvider)
+
+  if (platform !== 'linux') {
+    return null
+  }
 
   const handleEacRuntime = async () => {
     if (!eacRuntime) {

src/frontend/screens/Settings/components/SettingsModal/index.scss

@@ -2,8 +2,9 @@
   width: 65vw;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  flex: 1 1 60vh;
   max-width: 800px;
+  min-height: 50vh;
 
   .log-box {
     width: 100%;

src/frontend/screens/Settings/components/SettingsModal/index.tsx

@@ -51,7 +51,7 @@ function SettingsModal({ gameInfo, type }: Props) {
       </DialogHeader>
       <DialogContent className="settingsDialogContent">
         <SettingsContext.Provider value={contextValues}>
-          {type === 'settings' ? <GamesSettings useDetails /> : <LogSettings />}
+          {type === 'settings' ? <GamesSettings /> : <LogSettings />}
         </SettingsContext.Provider>
       </DialogContent>
     </Dialog>

src/frontend/screens/Settings/components/Tools/index.scss

@@ -8,6 +8,13 @@
   .button {
     padding-block: var(--space-lg);
     margin: 0 var(--space-3xs);
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+  }
+
+  .active {
+    animation: fading 1s alternate infinite;
   }
 
   .drag {
@@ -19,8 +26,9 @@
     flex-direction: column;
     text-decoration: none;
     white-space: nowrap;
+    justify-content: center;
 
-    & > span {
+    & span {
       transition: 350ms;
       font-size: var(--text-xs);
       font-style: italic;
@@ -29,3 +37,19 @@
     }
   }
 }
+
+@keyframes fading {
+  0% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 0.5;
+    background-color: var(--navbar-background);
+    color: var(--text-default);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/frontend/screens/Settings/components/Tools/index.tsx

@@ -14,6 +14,7 @@ export default function Tools() {
   const { t } = useTranslation()
   const [winecfgRunning, setWinecfgRunning] = useState(false)
   const [winetricksRunning, setWinetricksRunning] = useState(false)
+  const [runExeRunning, setRunExeRunning] = useState(false)
   const [progress, setProgress] = useState<string[]>([])
   const { appName, runner, isDefault } = useContext(SettingsContext)
   const { platform } = useContext(ContextProvider)
@@ -25,20 +26,26 @@ export default function Tools() {
 
   type Tool = 'winecfg' | 'winetricks' | string
   async function callTools(tool: Tool, exe?: string) {
-    if (tool === 'winetricks') {
-      setWinetricksRunning(true)
+    const toolStates = {
+      winetricks: setWinetricksRunning,
+      winecfg: setWinecfgRunning,
+      runExe: setRunExeRunning
     }
-    if (tool === 'winecfg') {
-      setWinecfgRunning(true)
+
+    if (tool in toolStates) {
+      toolStates[tool](true)
     }
+
     await window.api.callTool({
       tool,
       exe,
       appName,
       runner
     })
-    setWinetricksRunning(false)
-    setWinecfgRunning(false)
+
+    if (tool in toolStates) {
+      toolStates[tool](false)
+    }
   }
 
   useEffect(() => {
@@ -131,11 +138,12 @@ export default function Tools() {
           <a
             onDrop={async (ev) => dropHandler(ev)}
             onDragOver={(ev) => dragOverHandler(ev)}
-            className="button outline drag"
+            className={classNames('button outline drag', {
+              active: runExeRunning
+            })}
             onClick={handleRunExe}
           >
-            {t('setting.runexe.title')}
-            <br />
+            {t('setting.runexe.title')} <br />
             <span>{t('setting.runexe.message')}</span>
           </a>
         </div>

src/frontend/screens/Settings/index.tsx

@@ -121,7 +121,7 @@ function Settings() {
             </h1>
 
             {isGeneralSettings && <GeneralSettings />}
-            {isGamesSettings && <GamesSettings useDetails={false} />}
+            {isGamesSettings && <GamesSettings />}
             {isSyncSettings && <SyncSaves />}
             {isAdvancedSetting && <AdvancedSettings />}
             {isLogSettings && <LogSettings />}

src/frontend/screens/Settings/sections/GamesSettings/index.scss

@@ -26,6 +26,26 @@
   }
 }
 
+.MuiTabs-root {
+  padding-bottom: var(--space-xs);
+
+  .MuiTabs-scroller {
+    .MuiTabs-indicator {
+      background-color: var(--accent);
+    }
+
+    .MuiTabs-flexContainer {
+      .MuiTab-root {
+        color: var(--text-default);
+      }
+
+      .Mui-selected {
+        color: var(--accent);
+      }
+    }
+  }
+}
+
 // details, should have an hover effect and a pointer cursor and also the summary should be bold and have a background color
 details {
   cursor: pointer;