[UI/UX] Pre-release Fixes (#1956)

* fix: header filters

* fix: action icons grid/list order

* fix: refresh library after login

* other: remove gawk from dependencies

* feat: get game img from bottles steamGrid api

* fix: current download on sidebar after restart

* Fix README.md typo

Co-authored-by: Mathis Dröge <34034631+CommandMC@users.noreply.github.com>

* fix: log not found error

* fix: typo and lint

Co-authored-by: Mathis Dröge <34034631+CommandMC@users.noreply.github.com>

README.md

@@ -171,7 +171,7 @@ You can alternatively download the file ending in .rpm from the [latest release]
 
 #### Other Distributions (AppImage and TAR.XZ)
 
-Since these two distribution formats don't have a form of dependency management, make sure the `curl` and `gawk` commands are available. You might run into weird issues if they aren't.
+Since these two distribution formats don't have a form of dependency management, make sure the `curl` command is available. You might run into weird issues if it's not.
 
 ##### AppImage
 

package.json

@@ -103,21 +103,18 @@
     "deb": {
       "packageCategory": "games",
       "depends": [
-        "gawk",
         "curl"
       ]
     },
     "pacman": {
       "packageCategory": "games",
       "depends": [
-        "gawk",
         "curl"
       ]
     },
     "rpm": {
       "packageCategory": "games",
       "depends": [
-        "gawk",
         "curl"
       ]
     }

src/backend/logger/ipc_handler.ts

@@ -1,12 +1,16 @@
 import { ipcMain } from 'electron'
-import { readFileSync } from 'graceful-fs'
+import { existsSync, readFileSync } from 'graceful-fs'
 import { showItemInFolder } from '../utils'
 import { getLogFile } from './logfile'
 
 ipcMain.handle('getLogContent', async (event, { appName, defaultLast }) => {
-  return readFileSync(getLogFile({ appName, defaultLast }), {
-    encoding: 'utf-8'
-  })
+  const logPath = getLogFile({ appName, defaultLast })
+  if (existsSync(logPath)) {
+    return readFileSync(getLogFile({ appName, defaultLast }), {
+      encoding: 'utf-8'
+    })
+  }
+  return ''
 })
 
 ipcMain.on('showLogFileInFolder', async (e, { appName, defaultLast }) => {

src/frontend/components/UI/ActionIcons/index.tsx

@@ -75,7 +75,7 @@ export default function ActionIcons({
           >
             <FontAwesomeIcon
               className="FormControl__segmentedFaIcon"
-              icon={faBorderAll}
+              icon={faList}
             />
           </button>
         ) : (
@@ -86,7 +86,7 @@ export default function ActionIcons({
           >
             <FontAwesomeIcon
               className="FormControl__segmentedFaIcon"
-              icon={faList}
+              icon={faBorderAll}
             />
           </button>
         )}

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

@@ -25,6 +25,7 @@
   grid-area: filters;
   display: flex;
   align-self: center;
+  justify-self: flex-end;
 }
 
 .Header__filters .FormControl {

src/frontend/components/UI/PlatformFilter/index.tsx

@@ -14,8 +14,13 @@ export default function PlatformFilter() {
 
   const isMac = platform === 'darwin'
   const isLinux = platform === 'linux'
+  const isWindows = platform === 'win32'
   const disabledIcon = isLinux && category === 'legendary'
 
+  if (isWindows) {
+    return null
+  }
+
   return (
     <div className="platformFilters">
       <FormControl segmented>

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

@@ -42,7 +42,8 @@ export default function SidebarLinks() {
   const location = useLocation() as { pathname: string }
   const [, , runner, appName, type] = location.pathname.split('/') as PathSplit
 
-  const { epic, gog, platform, activeController } = useContext(ContextProvider)
+  const { epic, gog, platform, activeController, refreshLibrary } =
+    useContext(ContextProvider)
 
   const isStore = location.pathname.includes('store')
   const isSettings = location.pathname.includes('settings')
@@ -117,6 +118,9 @@ export default function SidebarLinks() {
           classNames('Sidebar__item', { active: isActive })
         }
         to={'/'}
+        onClick={async () =>
+          refreshLibrary({ runInBackground: false, fullRefresh: true })
+        }
       >
         <>
           <div className="Sidebar__itemIcon">

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

@@ -12,14 +12,15 @@ import SidebarLinks from './components/SidebarLinks'
 import './index.css'
 import HeroicVersion from './components/HeroicVersion'
 import { DMQueueElement } from 'common/types'
+import { DMQueue } from 'frontend/types'
 
 export default function Sidebar() {
   const { t } = useTranslation()
   const { sidebarCollapsed, setSideBarCollapsed } = useContext(ContextProvider)
   const [currentDMElement, setCurrentDMElement] = useState<DMQueueElement>()
 
   useEffect(() => {
-    window.api.getDMQueueInformation().then((elements: DMQueueElement[]) => {
+    window.api.getDMQueueInformation().then(({ elements }: DMQueue) => {
       setCurrentDMElement(elements[0])
     })
 

src/frontend/components/UI/StoreFilter/index.tsx

@@ -5,9 +5,12 @@ import FormControl from 'frontend/components/UI/FormControl'
 import ContextProvider from 'frontend/state/ContextProvider'
 
 export default function StoreFilter() {
-  const { category, handleCategory } = useContext(ContextProvider)
+  const { category, handleCategory, gog, epic } = useContext(ContextProvider)
   const { t } = useTranslation()
 
+  const isGOGLoggedin = gog.username
+  const isEpicLoggedin = epic.username
+
   return (
     <div className="storeFilter">
       <FormControl segmented small>
@@ -20,24 +23,28 @@ export default function StoreFilter() {
         >
           {t('All').toUpperCase()}
         </button>
-        <button
-          className={classNames('FormControl__button', {
-            active: category === 'legendary'
-          })}
-          title={`${t('header.store')}: ${t('store')}`}
-          onClick={() => handleCategory('legendary')}
-        >
-          EPIC
-        </button>
-        <button
-          className={classNames('FormControl__button', {
-            active: category === 'gog'
-          })}
-          title={`${t('header.store')}: ${t('GOG')}`}
-          onClick={() => handleCategory('gog')}
-        >
-          GOG
-        </button>
+        {isEpicLoggedin && (
+          <button
+            className={classNames('FormControl__button', {
+              active: category === 'legendary'
+            })}
+            title={`${t('header.store')}: ${t('store')}`}
+            onClick={() => handleCategory('legendary')}
+          >
+            EPIC
+          </button>
+        )}
+        {isGOGLoggedin && (
+          <button
+            className={classNames('FormControl__button', {
+              active: category === 'gog'
+            })}
+            title={`${t('header.store')}: ${t('GOG')}`}
+            onClick={() => handleCategory('gog')}
+          >
+            GOG
+          </button>
+        )}
         <button
           className={classNames('FormControl__button', {
             active: category === 'sideload'

src/frontend/screens/DownloadManager/index.tsx

@@ -7,17 +7,13 @@ import { UpdateComponent } from 'frontend/components/UI'
 import ProgressHeader from './components/ProgressHeader'
 import DownloadManagerHeader from './DownloadManagerHeader'
 import { downloadManagerStore } from 'frontend/helpers/electronStores'
+import { DMQueue } from 'frontend/types'
 
 const DownloadManagerItem = lazy(
   async () =>
     import('frontend/screens/DownloadManager/components/DownloadManagerItem')
 )
 
-type DMQueue = {
-  elements: DMQueueElement[]
-  finished: DMQueueElement[]
-}
-
 export default function DownloadManager(): JSX.Element | null {
   const { t } = useTranslation()
   const [refreshing, setRefreshing] = useState(false)

src/frontend/screens/Library/components/InstallModal/SideloadDialog/index.tsx

@@ -102,6 +102,22 @@ export default function SideloadDialog({
     setWine()
   }, [title])
 
+  useEffect(() => {
+    setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `https://steamgrid.usebottles.com/api/search/${title}`
+        )
+        if (res.status === 200) {
+          const steamGridImage = (await res.json()) as string
+          setImageUrl(steamGridImage)
+        }
+      } catch (error) {
+        console.log('Error when getting image from SteamGridDB')
+      }
+    }, 2000)
+  }, [title])
+
   async function handleInstall(): Promise<void> {
     window.api.addNewApp({
       runner: 'sideload',

src/frontend/screens/Login/index.tsx

@@ -17,7 +17,7 @@ export const epicLoginPath = '/loginweb/legendary'
 export const gogLoginPath = '/loginweb/gog'
 
 export default function NewLogin() {
-  const { epic, gog } = useContext(ContextProvider)
+  const { epic, gog, refreshLibrary } = useContext(ContextProvider)
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [loading, setLoading] = useState(true)
@@ -39,6 +39,11 @@ export default function NewLogin() {
     setIsGogLoggedIn(Boolean(gog.username))
   }, [epic.username, gog.username, t])
 
+  async function handleLibraryClick() {
+    await refreshLibrary({ fullRefresh: true, runInBackground: false })
+    navigate('/')
+  }
+
   return (
     <div className="loginPage">
       {loading && (
@@ -96,12 +101,12 @@ export default function NewLogin() {
             />
           </div>
         </div>
-
-        {(epic.username || gog.username) && (
-          <button onClick={() => navigate('/')} className="goToLibrary">
-            {t('button.go_to_library', 'Go to Library')}
-          </button>
-        )}
+        <button
+          onClick={async () => handleLibraryClick()}
+          className="goToLibrary"
+        >
+          {t('button.go_to_library', 'Go to Library')}
+        </button>
       </div>
     </div>
   )

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

@@ -73,15 +73,15 @@ export default function LogSettings() {
         defaultLast
       })
       .then((content: string) => {
+        if (!content) {
+          setLogFileContent(t('setting.log.no-file', 'No log file found.'))
+          setLogFileExist(false)
+          return setRefreshing(false)
+        }
         setLogFileContent(content)
         setLogFileExist(true)
         setRefreshing(false)
       })
-      .catch(() => {
-        setLogFileContent(t('setting.log.no-file', 'No log file found.'))
-        setLogFileExist(false)
-        setRefreshing(false)
-      })
   }
 
   useEffect(() => {

src/frontend/screens/WebView/index.tsx

@@ -104,7 +104,7 @@ export default function WebView() {
 
             setTimeout(() => {
               webview.findInPage('authorizationCode')
-            }, 500)
+            }, 50)
             webview.addEventListener('found-in-page', async () => {
               webview.focus()
               webview.selectAll()
@@ -125,7 +125,7 @@ export default function WebView() {
                   console.error(error)
                   window.api.logError(String(error))
                 }
-              }, 500)
+              }, 200)
             })
           })
         }

src/frontend/state/GlobalState.tsx

@@ -295,7 +295,7 @@ export class GlobalState extends PureComponent<Props> {
   }
 
   handleSuccessfulLogin = (runner: Runner) => {
-    this.handleCategory(runner)
+    this.handleCategory('all')
     this.refreshLibrary({
       fullRefresh: true,
       runInBackground: false,

src/frontend/types.ts

@@ -8,7 +8,8 @@ import {
   ConnectivityStatus,
   DialogType,
   ButtonOptions,
-  LibraryTopSectionOptions
+  LibraryTopSectionOptions,
+  DMQueueElement
 } from 'common/types'
 
 export type Category = 'all' | 'legendary' | 'gog' | 'sideload'
@@ -230,3 +231,8 @@ export interface LocationState {
   isLinuxNative: boolean
   isMacNative: boolean
 }
+
+export type DMQueue = {
+  elements: DMQueueElement[]
+  finished: DMQueueElement[]
+}