[Feature] Add ExperimentalFeatures feature with dummy example

public/locales/en/translation.json

@@ -518,6 +518,9 @@
         },
         "esync": "Enable Esync",
         "exit-to-tray": "Exit to System Tray",
+        "experimental_features": {
+            "enableNewShinyFeature": "New shiny feature"
+        },
         "FsrSharpnessStrenght": "FSR Sharpness Strength",
         "fsync": "Enable Fsync",
         "gamemode": "Use GameMode (Feral Game Mode needs to be installed)",
@@ -598,6 +601,9 @@
             "installing": "Installing EAC Runtime...",
             "name": "EasyAntiCheat Runtime"
         },
+        "experimental_features": {
+            "title": "Experimental Features"
+        },
         "gameMode": {
             "eacRuntimeEnabled": {
                 "message": "The EAC runtime is enabled, which won't function correctly without GameMode. Do you want to disable the EAC Runtime and GameMode?",

src/common/types.ts

@@ -43,6 +43,10 @@ export type Release = {
   body?: string
 }
 
+export type ExperimentalFeatures = {
+  enableNewShinyFeature: boolean
+}
+
 export interface AppSettings extends GameSettings {
   addDesktopShortcuts: boolean
   addStartMenuShortcuts: boolean
@@ -66,6 +70,7 @@ export interface AppSettings extends GameSettings {
   egsLinkedPath: string
   enableUpdates: boolean
   exitToTray: boolean
+  experimentalFeatures: ExperimentalFeatures
   hideChangelogsOnStartup: boolean
   libraryTopSection: LibraryTopSectionOptions
   maxRecentGames: number

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import CurrentDownload from './components/CurrentDownload'
 import SidebarLinks from './components/SidebarLinks'
@@ -8,6 +8,7 @@ import { DMQueueElement } from 'common/types'
 
 import { ReactComponent as HeroicIcon } from 'frontend/assets/heroic-icon.svg'
 import { useNavigate } from 'react-router-dom'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 let sidebarSize = localStorage.getItem('sidebar-width') || 240
 const minWidth = 60
@@ -17,6 +18,7 @@ const collapsedWidth = 120
 export default React.memo(function Sidebar() {
   const sidebarEl = useRef<HTMLDivElement | null>(null)
   const [currentDMElement, setCurrentDMElement] = useState<DMQueueElement>()
+  const { experimentalFeatures } = useContext(ContextProvider)
 
   const navigate = useNavigate()
 
@@ -144,6 +146,9 @@ export default React.memo(function Sidebar() {
         )}
       </div>
       <HeroicVersion />
+      {experimentalFeatures.enableNewShinyFeature && (
+        <p>New Shiny Feature enabled</p>
+      )}
       <div className="resizer" onMouseDown={handleDragStart} />
     </aside>
   )

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

@@ -0,0 +1,54 @@
+import React, { useContext, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSetting from 'frontend/hooks/useSetting'
+import { ToggleSwitch } from 'frontend/components/UI'
+import ContextProvider from 'frontend/state/ContextProvider'
+
+const FEATURES = ['enableNewShinyFeature']
+
+const ExperimentalFeatures = () => {
+  const { t } = useTranslation()
+  const [experimentalFeatures, setExprimentalFeatures] = useSetting(
+    'experimentalFeatures',
+    { enableNewShinyFeature: false }
+  )
+  const { handleExperimentalFeatures } = useContext(ContextProvider)
+
+  const toggleFeature = (feature: string) => {
+    setExprimentalFeatures({
+      ...experimentalFeatures,
+      [feature]: !experimentalFeatures[feature]
+    })
+  }
+
+  useEffect(() => {
+    handleExperimentalFeatures(experimentalFeatures)
+  }, [experimentalFeatures])
+
+  /*
+    Translations:
+    t('setting.experimental_features.enableNewShinyFeature', 'New shiny feature')
+  */
+
+  return (
+    <>
+      <h3>
+        {t('settings.experimental_features.title', 'Experimental Features')}
+      </h3>
+      {FEATURES.map((feature) => {
+        return (
+          <div key={feature}>
+            <ToggleSwitch
+              htmlId={feature}
+              value={experimentalFeatures[feature]}
+              handleChange={() => toggleFeature(feature)}
+              title={t(`setting.experimental_features.${feature}`, feature)}
+            />
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default ExperimentalFeatures

src/frontend/screens/Settings/components/index.ts

@@ -21,6 +21,7 @@ export { default as EnableEsync } from './EnableEsync'
 export { default as EnableFSR } from './EnableFSR'
 export { default as EnableFsync } from './EnableFsync'
 export { default as EnvVariablesTable } from './EnvVariablesTable'
+export { default as ExperimentalFeatures } from './ExperimentalFeatures'
 export { default as GameMode } from './GameMode'
 export { default as IgnoreGameUpdates } from './IgnoreGameUpdates'
 export { default as HideChangelogOnStartup } from './HideChangelogOnStartup'

src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx

@@ -20,7 +20,8 @@ import {
   AltLegendaryBin,
   AltNileBin,
   DisableLogs,
-  DownloadNoHTTPS
+  DownloadNoHTTPS,
+  ExperimentalFeatures
 } from '../../components'
 
 export default function AdvancedSettings() {
@@ -296,6 +297,8 @@ export default function AdvancedSettings() {
         </div>
         <br />
         <hr />
+        <ExperimentalFeatures />
+        <hr />
       </div>
       <div className="footerFlex">
         <button

src/frontend/state/ContextProvider.tsx

@@ -86,7 +86,9 @@ const initialContext: ContextType = {
   lastChangelogShown: null,
   setLastChangelogShown: () => null,
   isSettingsModalOpen: { value: false, type: 'settings' },
-  setIsSettingsModalOpen: () => null
+  setIsSettingsModalOpen: () => null,
+  experimentalFeatures: { enableNewShinyFeature: false },
+  handleExperimentalFeatures: () => null
 }
 
 export default React.createContext(initialContext)

src/frontend/state/GlobalState.tsx

@@ -10,7 +10,8 @@ import {
   Runner,
   WineVersionInfo,
   InstallParams,
-  LibraryTopSectionOptions
+  LibraryTopSectionOptions,
+  ExperimentalFeatures
 } from 'common/types'
 import {
   Category,
@@ -112,6 +113,7 @@ interface StateProps {
     appName: string
     runner: Runner
   }
+  experimentalFeatures: ExperimentalFeatures
 }
 
 class GlobalState extends PureComponent<Props> {
@@ -195,7 +197,10 @@ class GlobalState extends PureComponent<Props> {
     externalLinkDialogOptions: { showDialog: false },
     hideChangelogsOnStartup: globalSettings?.hideChangelogsOnStartup || false,
     lastChangelogShown: JSON.parse(storage.getItem('last_changelog') || 'null'),
-    settingsModalOpen: { value: false, type: 'settings', gameInfo: undefined }
+    settingsModalOpen: { value: false, type: 'settings', gameInfo: undefined },
+    experimentalFeatures: globalSettings?.experimentalFeatures || {
+      enableNewShinyFeature: false
+    }
   }
 
   setLanguage = (newLanguage: string) => {
@@ -344,6 +349,10 @@ class GlobalState extends PureComponent<Props> {
     this.setState({ libraryTopSection: value })
   }
 
+  handleExperimentalFeatures = (value: ExperimentalFeatures) => {
+    this.setState({ experimentalFeatures: value })
+  }
+
   handleSuccessfulLogin = (runner: Runner) => {
     this.handleCategory('all')
     this.refreshLibrary({
@@ -889,6 +898,7 @@ class GlobalState extends PureComponent<Props> {
             remove: this.removeGameFromFavourites
           },
           handleLibraryTopSection: this.handleLibraryTopSection,
+          handleExperimentalFeatures: this.handleExperimentalFeatures,
           setTheme: this.setTheme,
           setZoomPercent: this.setZoomPercent,
           setAllTilesInColor: this.setAllTilesInColor,

src/frontend/types.ts

@@ -8,7 +8,8 @@ import {
   ButtonOptions,
   LibraryTopSectionOptions,
   DMQueueElement,
-  DownloadManagerState
+  DownloadManagerState,
+  ExperimentalFeatures
 } from 'common/types'
 import { NileLoginData, NileRegisterData } from 'common/types/nile'
 
@@ -104,6 +105,8 @@ export interface ContextType {
     type?: 'settings' | 'log',
     gameInfo?: GameInfo
   ) => void
+  experimentalFeatures: ExperimentalFeatures
+  handleExperimentalFeatures: (newSetting: ExperimentalFeatures) => void
 }
 
 export type DialogModalOptions = {