page switching with custom event

src/ui/App.css

@@ -35,12 +35,29 @@ select:focus {
 .TopButton {
   height: 60%;
   margin: 0px 10px;
+
+  color: #c5c5c5;
+  transition: color 0.1s ease-in-out;
+}
+
+.TopButton span {
+  display: inline-block;
+  line-height: normal;
+  border-bottom: 1px solid #c5c5c5;
+}
+
+.TopButton img {
   filter: invert(95%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(88%) contrast(81%);
 
   transition: filter 0.1s ease-in-out;
 }
 
 .TopButton:hover {
+  color: #fff;
+  cursor: pointer;
+}
+
+.TopButton:hover img {
   filter: invert(100%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(100%) contrast(100%);
   cursor: pointer;
 }

src/ui/App.tsx

@@ -7,9 +7,10 @@ import { getTheme, loadTheme } from '../utils/themes'
 import { convertFileSrc, invoke } from '@tauri-apps/api/tauri'
 import { dataDir } from '@tauri-apps/api/path'
 import { Main } from './Main'
+import { Mods } from './Mods'
 
 interface IState {
-  moddingOpen: boolean
+  page: string
   bgFile: string
 }
 
@@ -21,7 +22,7 @@ class App extends React.Component<Readonly<unknown>, IState> {
     super(props)
 
     this.state = {
-      moddingOpen: false,
+      page: 'main',
       bgFile: DEFAULT_BG,
     }
   }
@@ -85,6 +86,13 @@ class App extends React.Component<Readonly<unknown>, IState> {
         )
       }
     }
+
+    window.addEventListener('changePage', (e) => {
+      this.setState({
+        // @ts-expect-error - TS doesn't like our custom event
+        page: e.detail,
+      })
+    })
   }
 
   render() {
@@ -99,11 +107,14 @@ class App extends React.Component<Readonly<unknown>, IState> {
             : {}
         }
       >
-        {this.state.moddingOpen ? null : (
-          <>
-            <Main downloadHandler={downloadHandler} />
-          </>
-        )}
+        {(() => {
+          switch (this.state.page) {
+            case 'modding':
+              return <Mods downloadHandler={downloadHandler} />
+            default:
+              return <Main downloadHandler={downloadHandler} />
+          }
+        })()}
       </div>
     )
   }

src/ui/Debug.tsx

@@ -44,7 +44,7 @@ class Debug extends React.Component {
   render() {
     return (
       <div className="App">
-        <TopBar optFunc={none} downFunc={none} gameFunc={none} modFunc={none} />
+        <TopBar />
         <TextInput readOnly={false} initalValue={'change to set proxy address'} onChange={setProxyAddress} />
         <button onClick={startProxy}>start proxy</button>
         <button onClick={stopProxy}>stop proxy</button>

src/ui/Main.tsx

@@ -20,6 +20,11 @@ import { appWindow } from '@tauri-apps/api/window'
 import { unpatchGame } from '../utils/metadata'
 import DownloadHandler from '../utils/download'
 
+// Graphics
+import cogBtn from '../resources/icons/cog.svg'
+import downBtn from '../resources/icons/download.svg'
+import wrenchBtn from '../resources/icons/wrench.svg'
+
 interface IProps {
   downloadHandler: DownloadHandler
 }
@@ -45,8 +50,6 @@ export class Main extends React.Component<IProps, IState> {
       moddingOpen: false,
     }
 
-    invoke('list_submissions')
-
     listen('lang_error', (payload) => {
       console.log(payload)
     })
@@ -111,14 +114,36 @@ export class Main extends React.Component<IProps, IState> {
   render() {
     return (
       <>
-        <TopBar
-          optFunc={() => {
-            this.setState({ optionsOpen: !this.state.optionsOpen })
+        <TopBar>
+          <div
+            id="settingsBtn"
+            onClick={() => this.setState({ optionsOpen: !this.state.optionsOpen })}
+            className="TopButton"
+          >
+            <img src={cogBtn} alt="settings" />
+          </div>
+          <div
+            id="downloadsBtn"
+            className="TopButton"
+            onClick={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
+          >
+            <img src={downBtn} alt="downloads" />
+          </div>
+          <div
+            id="modsBtn"
+            onClick={() => {
+              // Create and dispatch a custom "openMods" event
+              const event = new CustomEvent('changePage', { detail: 'modding' })
+              window.dispatchEvent(event)
             }}
-          downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
-          gameFunc={() => this.setState({ gameDownloadsOpen: !this.state.gameDownloadsOpen })}
-          modFunc={() => this.setState({ moddingOpen: !this.state.moddingOpen })}
-        />
+            className="TopButton"
+          >
+            <img src={wrenchBtn} alt="mods" />
+          </div>
+          {/* <div id="gameBtn" className="TopButton" onClick={() => this.setState({ gameDownloadsOpen: !this.state.gameDownloadsOpen })}>
+            <img src={gameBtn} alt="game" />
+          </div> */}
+        </TopBar>
 
         <RightBar />
 

src/ui/Mods.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import DownloadHandler from '../utils/download'
+import TopBar from './components/TopBar'
+
+interface IProps {
+  downloadHandler: DownloadHandler
+}
+
+interface IState {
+  isDownloading: boolean
+}
+
+export class Mods extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  async componentDidMount() {
+    return
+  }
+
+  render() {
+    return (
+      <>
+        <TopBar />
+      </>
+    )
+  }
+}

src/ui/components/TopBar.tsx

@@ -3,8 +3,6 @@ import { app } from '@tauri-apps/api'
 import { appWindow } from '@tauri-apps/api/window'
 import closeIcon from '../../resources/icons/close.svg'
 import minIcon from '../../resources/icons/min.svg'
-import cogBtn from '../../resources/icons/cog.svg'
-import downBtn from '../../resources/icons/download.svg'
 
 import Tr from '../../utils/language'
 
@@ -12,10 +10,7 @@ import './TopBar.css'
 import { getConfig, setConfigOption } from '../../utils/configuration'
 
 interface IProps {
-  optFunc: () => void
-  downFunc: () => void
-  gameFunc: () => void
-  modFunc: () => void
+  children?: React.ReactNode[]
 }
 
 interface IState {
@@ -111,18 +106,7 @@ export default class TopBar extends React.Component<IProps, IState> {
           <div id="minBtn" onClick={this.handleMinimize} className="TopButton">
             <img src={minIcon} alt="minimize" />
           </div>
-          <div id="settingsBtn" onClick={this.props.optFunc} className="TopButton">
-            <img src={cogBtn} alt="settings" />
-          </div>
-          <div id="downloadsBtn" className="TopButton" onClick={this.props.downFunc}>
-            <img src={downBtn} alt="downloads" />
-          </div>
-          <div id="modsBtn" onClick={this.props.modFunc} className="TopButton">
-            MODS
-          </div>
-          {/* <div id="gameBtn" className="TopButton" onClick={this.props.gameFunc}>
-            <img src={gameBtn} alt="game" />
-          </div> */}
+          {this.props.children}
         </div>
       </div>
     )