[UX] Help component

.eslintrc

@@ -35,7 +35,15 @@
     "@typescript-eslint/return-await": "warn",
     "react/no-unknown-property": [
       "error",
-      { "ignore": ["partition", "allowpopups", "useragent"] }
+      {
+        "ignore": [
+          "partition",
+          "allowpopups",
+          "useragent",
+          "popover",
+          "popovertarget"
+        ]
+      }
     ],
     "@typescript-eslint/promise-function-async": [
       "error",

public/locales/en/gamepage.json

@@ -103,7 +103,13 @@
         "noDescription": "No description available"
     },
     "help": {
-        "cloud_save_unsupported": "This game does not support cloud saves. This information is provided by the game developers. Some games do implement their own cloud save system"
+        "cloud_save_unsupported": "This game does not support cloud saves. This information is provided by the game developers. Some games do implement their own cloud save system",
+        "content": {
+            "gamePage": "Show all game details and actions. Use the 3 dots menu for more options."
+        },
+        "title": {
+            "gamePage": "Game Page"
+        }
     },
     "hours": "Hours",
     "how-long-to-beat": {

public/locales/en/translation.json

@@ -267,6 +267,21 @@
     },
     "help": {
         "amdfsr": "AMD's FSR helps boost framerate by upscaling lower resolutions in Fullscreen Mode. Image quality increases from 5 to 1 at the cost of a slight performance hit. Enabling may improve performance.",
+        "button": {
+            "close": "Close Help",
+            "open": "Open Help"
+        },
+        "content": {
+            "accessibility": "Shows accessibility settings.",
+            "customThemesPath": "Check our wiki.",
+            "defaultInstallPath": "This is the default path preselected when installing games.",
+            "downloadManager": "Shows current and past downloads.",
+            "library": "Shows all owned games.",
+            "login": "Log in into the different stores.",
+            "settingsDefault": "Shows all settings of Heroic and defaults for games.",
+            "settingsGame": "Show all settings for a game.",
+            "wineManager": "Install different versions of Wine, Proton, Crossover, etc."
+        },
         "custom_themes_path": "Do not use CSS files from untrusted sources. When in doubt, ask for a review in our Discord channel.",
         "custom_themes_wiki": "Check the Wiki for more details on adding custom themes. Click here.",
         "disable_logs": "Toggle this checkbox ON to disable most of the writes to log files (critical information is always logged). Make sure to turn OFF this setting before reporting any issue.",
@@ -311,6 +326,14 @@
             "part3": "Manual Sync: Choose Download to download the games saves stored on the Cloud. Upload to upload the local ones to the cloud. Force Download and Force Upload will ignore the version that is locally or on the cloud.",
             "part4": "Sync Saves Automatically will sync the saves every time you Start a Game and after finishing playing."
         },
+        "title": {
+            "accessibility": "Accessibility",
+            "downloadManager": "Download Manager",
+            "library": "Library",
+            "login": "Login",
+            "settings": "Settings",
+            "wineManager": "Wine Manager"
+        },
         "vkd3d": "VKD3D is a Vulkan-based translational layer for DirectX 12 games. Enabling may improve compatibility significantly. Has no effect on older DirectX games, it requires DXVK.",
         "wine": {
             "part1": "Heroic searches for versions of Wine, Proton, and CrossOver in the following folders:",
@@ -570,6 +593,7 @@
         "esync": "Enable Esync",
         "exit-to-tray": "Exit to System Tray",
         "experimental_features": {
+            "enableHelp": "Help component",
             "enableNewDesign": "New design"
         },
         "frameless-window": {

src/common/types.ts

@@ -45,6 +45,7 @@ export type Release = {
 
 export type ExperimentalFeatures = {
   enableNewDesign: boolean
+  enableHelp: boolean
 }
 
 export interface AppSettings extends GameSettings {

src/frontend/App.css

@@ -63,6 +63,21 @@ body {
   grid-area: offline;
 }
 
+.HelpButton {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+
+#root:has(dialog:popover-open) {
+  pointer-events: none;
+
+  .HelpButton,
+  :popover-open {
+    pointer-events: all;
+  }
+}
+
 .danger {
   font-weight: var(--bold);
   color: var(--text-danger, var(--danger));

src/frontend/App.tsx

@@ -11,7 +11,7 @@ import Sidebar from './components/UI/Sidebar'
 import Settings from './screens/Settings'
 import Accessibility from './screens/Accessibility'
 import ContextProvider from './state/ContextProvider'
-import { ControllerHints, OfflineMessage } from './components/UI'
+import { ControllerHints, Help, OfflineMessage } from './components/UI'
 import DownloadManager from './screens/DownloadManager'
 import DialogHandler from './components/UI/DialogHandler'
 import SettingsModal from './screens/Settings/components/SettingsModal'
@@ -25,7 +25,8 @@ function App() {
     isRTL,
     isFullscreen,
     isFrameless,
-    experimentalFeatures
+    experimentalFeatures,
+    help
   } = useContext(ContextProvider)
 
   const hasNativeOverlayControls = navigator['windowControlsOverlay']?.visible
@@ -88,6 +89,7 @@ function App() {
           <div className="simple-keyboard"></div>
         </div>
         {showOverlayControls && <WindowControls />}
+        {experimentalFeatures.enableHelp && <Help items={help.items} />}
       </HashRouter>
     </div>
   )

src/frontend/components/UI/Dialog/components/Dialog.tsx

@@ -32,10 +32,11 @@ export const Dialog: React.FC<DialogProps> = ({
         onCloseRef.current()
       }
       dialog.addEventListener('cancel', cancel)
-      dialog['showModal']()
+      dialog['showPopover']()
+
       return () => {
         dialog.removeEventListener('cancel', cancel)
-        dialog['close']()
+        dialog['hidePopover']()
       }
     }
     return
@@ -65,6 +66,9 @@ export const Dialog: React.FC<DialogProps> = ({
         className={`Dialog__element ${className}`}
         ref={dialogRef}
         onClick={onDialogClick}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore, this feature is new and not yet typed
+        popover="manual"
       >
         {showCloseButton && (
           <div className="Dialog__Close">

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

@@ -25,8 +25,11 @@
     transform 500ms;
   max-width: min(700px, 85vw);
 }
+.Dialog__element::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+}
 
-.Dialog__element[open] {
+.Dialog__element:popover-open {
   opacity: 1;
   transform: translateY(0);
   box-shadow: 0px 0px 0px 100vmax var(--modal-backdrop);

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

@@ -0,0 +1,73 @@
+.HelpButton,
+.HelpContent {
+  transition: transform 300ms ease-out;
+  z-index: 100;
+}
+
+.HelpButton {
+  transform: translateX(0);
+  color: white;
+  border: 1px solid white;
+  border-radius: 0px;
+  background: black;
+  padding: 0.5rem 1rem;
+  font-size: 2rem;
+  font-weight: bold;
+  opacity: 0.5;
+  transition:
+    opacity 100ms linear,
+    transform 300ms ease-out;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  &.open {
+    transform: translateX(-30vw);
+  }
+}
+
+.HelpContent {
+  display: block;
+  background: var(--background);
+  color: var(--text-default);
+  border: 1px solid var(--text-default);
+  top: 0px;
+  height: 100vh;
+  width: 30vw;
+  right: 0;
+  left: 70vw;
+  padding: 0 1rem;
+  transform: translateX(100%);
+  transition: transform 300ms ease-out;
+  text-align: start;
+
+  &:popover-open {
+    transform: translateX(0);
+  }
+
+  & button {
+    background: white;
+    border: 0;
+    border-radius: 0 0 0 50%;
+    padding: 0.5rem 1rem;
+  }
+
+  & details:not(:last-child) {
+    border-bottom: 1px solid var(--text-default);
+  }
+
+  & summary {
+    font-size: 1.2rem;
+  }
+
+  & p {
+    font-size: 1.1rem;
+  }
+
+  & summary + p {
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+import './index.css'
+import { HelpItem } from 'frontend/types'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  items: { [key: string]: HelpItem }
+}
+
+export default function Help({ items }: Props) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const toggleOpen = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <>
+      <button
+        className={`HelpButton ${open ? 'open' : ''}`}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore, this feature is new and not yet typed
+        popovertarget="help_content"
+        onClick={() => toggleOpen()}
+        title={
+          open
+            ? t('help.button.close', 'Close Help')
+            : t('help.button.open', 'Open Help')
+        }
+      >
+        ?
+      </button>
+      <div
+        className={`HelpContent ${open ? 'open' : ''}`}
+        id="help_content"
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore, this feature is new and not yet typed
+        popover="manual"
+      >
+        {Object.keys(items).map((key) => (
+          <details key={key}>
+            <summary>{items[key]['title']}</summary>
+            {items[key]['content']}
+          </details>
+        ))}
+      </div>
+    </>
+  )
+}

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

@@ -4,6 +4,7 @@ import ContextProvider from 'frontend/state/ContextProvider'
 import { SelectField, InfoBox, PathSelectionBox } from '..'
 import { AppSettings } from 'common/types'
 import { writeConfig } from 'frontend/helpers'
+import { hasHelp } from 'frontend/hooks/hasHelp'
 
 export const defaultThemes = {
   midnightMirage: 'Midnight Mirage',
@@ -29,6 +30,12 @@ export const ThemeSelector = () => {
   const [themesPath, setThemesPath] = useState('')
   const [themes, setThemes] = useState<string[]>(Object.keys(defaultThemes))
 
+  hasHelp(
+    'customThemesPath',
+    t('setting.custom_themes_path', 'Custom Themes Path'),
+    <p>{t('help.content.customThemesPath', 'Check our wiki.')}</p>
+  )
+
   // load themes from the custom themes path
   const loadThemes = async () => {
     const themes = await window.api.getCustomThemes()

src/frontend/components/UI/index.tsx

@@ -12,3 +12,4 @@ export { default as CachedImage } from './CachedImage'
 export { default as OfflineMessage } from './OfflineMessage'
 export { default as PathSelectionBox } from './PathSelectionBox'
 export { default as Winetricks } from './Winetricks'
+export { default as Help } from './Help'

src/frontend/hooks/hasHelp.ts

@@ -0,0 +1,21 @@
+import ContextProvider from 'frontend/state/ContextProvider'
+import { useEffect, useContext } from 'react'
+
+export const hasHelp = (
+  helpItemId: string,
+  title: string,
+  content: JSX.Element
+) => {
+  const { help } = useContext(ContextProvider)
+
+  useEffect(() => {
+    help.addHelpItem(helpItemId, {
+      title,
+      content
+    })
+
+    return () => {
+      help.removeHelpItem(helpItemId)
+    }
+  }, [])
+}

src/frontend/screens/Accessibility/index.tsx

@@ -15,6 +15,7 @@ import ToggleSwitch from 'frontend/components/UI/ToggleSwitch'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 import './index.css'
+import { hasHelp } from 'frontend/hooks/hasHelp'
 
 export default React.memo(function Accessibility() {
   const { t } = useTranslation()
@@ -28,6 +29,12 @@ export default React.memo(function Accessibility() {
     setSecondaryFontFamily
   } = useContext(ContextProvider)
 
+  hasHelp(
+    'accessibility',
+    t('help.title.accessibility', 'Accessibility'),
+    <p>{t('help.content.accessibility', 'Shows accessibility settings.')}</p>
+  )
+
   const [fonts, setFonts] = useState<string[]>([])
   const [refreshing, setRefreshing] = useState(false)
   const [contentFont, setContentFont] = useState('')

src/frontend/screens/DownloadManager/index.tsx

@@ -9,6 +9,7 @@ import DownloadManagerHeader from './DownloadManagerHeader'
 import { downloadManagerStore } from 'frontend/helpers/electronStores'
 import { DMQueue } from 'frontend/types'
 import DownloadManagerItem from './components/DownloadManagerItem'
+import { hasHelp } from 'frontend/hooks/hasHelp'
 
 export default React.memo(function DownloadManager(): JSX.Element | null {
   const { t } = useTranslation()
@@ -18,6 +19,14 @@ export default React.memo(function DownloadManager(): JSX.Element | null {
   const [currentElement, setCurrentElement] = useState<DMQueueElement>()
   const [finishedElem, setFinishedElem] = useState<DMQueueElement[]>()
 
+  hasHelp(
+    'downloadManager',
+    t('help.title.downloadManager', 'Download Manager'),
+    <p>
+      {t('help.content.downloadManager', 'Shows current and past downloads.')}
+    </p>
+  )
+
   useEffect(() => {
     setRefreshing(true)
     window.api.getDMQueueInformation().then(({ elements, state }: DMQueue) => {