downloads section and dividers

lang/en.json

@@ -12,7 +12,13 @@
     "grasscutter_jar": "Set Grasscutter Jar",
     "grasscutter_with_game": "Automatically launch Grasscutter with game"
   },
+  "downloads": {
+    "grasscutter_stable": "Download Grasscutter Stable",
+    "grasscutter_latest": "Download Grasscutter Latest",
+    "resources": "Download Grasscutter Resources"
+  },
   "components": {
-    "select_file": "Select file or folder..."
+    "select_file": "Select file or folder...",
+    "download": "Download"
   }
 }

src/ui/App.css

@@ -58,4 +58,4 @@ body {
   top: 73%;
   left: 15%;
   
-}
+}

src/ui/App.tsx

@@ -12,6 +12,7 @@ import MainProgressBar from './components/common/MainProgressBar'
 import Options from './components/menu/Options'
 import MiniDialog from './components/MiniDialog'
 import DownloadList from './components/common/DownloadList'
+import Downloads from './components/menu/Downloads'
 
 interface IProps {
   [key: string]: never;
@@ -21,6 +22,7 @@ interface IState {
   isDownloading: boolean;
   optionsOpen: boolean;
   miniDownloadsOpen: boolean;
+  downloadsOpen: boolean;
 }
 
 const downloadHandler = new DownloadHandler()
@@ -45,6 +47,7 @@ class App extends React.Component<IProps, IState> {
       isDownloading: false,
       optionsOpen: false,
       miniDownloadsOpen: false,
+      downloadsOpen: false
     }
 
     listen('lang_error', (payload) => {
@@ -59,9 +62,11 @@ class App extends React.Component<IProps, IState> {
           optFunc={() => {
             this.setState({ optionsOpen: !this.state.optionsOpen })
           }}
-          downFunc={() => { console.log('Shit is changing dw') }}
+          downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
         />
 
+
+
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? 
@@ -76,6 +81,12 @@ class App extends React.Component<IProps, IState> {
         }
 
         {
+          // Download menu
+          this.state.downloadsOpen ? <Downloads downloadManager={downloadHandler} closeFn={() => this.setState({ downloadsOpen: false }) } /> : null
+        }
+
+        {
+          // Options menu
           this.state.optionsOpen ? <Options closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null
         }
 

src/ui/components/menu/Downloads.css

@@ -0,0 +1,27 @@
+.Downloads {
+  width: 30%;
+}
+
+.DownloadSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  margin-bottom: 12px;
+  width: 90%;
+  min-height: 30px;
+}
+
+.DownloadValue {
+  height: 100%;
+}
+
+.DownloadValue .BigButton {
+  height: 100%;
+  min-height: 30px;
+}
+
+.DownloadValue .BigButtonText {
+  font-size: 12px;
+}

src/ui/components/menu/Downloads.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import Menu from './Menu'
+import Tr from '../../../utils/language'
+import DownloadHandler from '../../../utils/download'
+import BigButton from '../common/BigButton'
+
+import './Downloads.css'
+import Divider from './Divider'
+
+interface IProps {
+  closeFn: () => void;
+  downloadManager: DownloadHandler;
+}
+
+interface IState {
+  grasscutter_downloading: boolean
+  resources_downloading: boolean
+}
+
+export default class Downloads extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      grasscutter_downloading: false,
+      resources_downloading: false
+    }
+  }
+
+  render() {
+    return (
+      <Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads">
+        <div className='DownloadSection'>
+          <div className='DownloadLabel'>
+            <Tr text="downloads.grasscutter_stable" />
+          </div>
+          <div className='DownloadValue'>
+            <BigButton onClick={() => console.log('download')} id="grasscutterStableBtn" >
+              <Tr text="components.download" />
+            </BigButton>
+          </div>
+        </div>
+        <div className='DownloadSection'>
+          <div className='DownloadLabel'>
+            <Tr text="downloads.grasscutter_latest" />
+          </div>
+          <div className='DownloadValue'>
+            <BigButton onClick={() => console.log('download')} id="grasscutterLatestBtn" >
+              <Tr text="components.download" />
+            </BigButton>
+          </div>
+        </div>
+
+        <Divider />
+
+        <div className='DownloadSection'>
+          <div className='DownloadLabel'>
+            <Tr text="downloads.resources" />
+          </div>
+          <div className='DownloadValue'>
+            <BigButton onClick={() => console.log('download')} id="resourcesBtn" >
+              <Tr text="components.download" />
+            </BigButton>
+          </div>
+        </div>
+      </Menu>
+    )
+  }
+}

src/ui/components/menu/Options.tsx

@@ -5,6 +5,7 @@ import Tr from '../../../utils/language'
 import './Options.css'
 import { setConfigOption, getConfig, getConfigOption } from '../../../utils/configuration'
 import Checkbox from '../common/Checkbox'
+import Divider from './Divider'
 
 interface IProps {
   closeFn: () => void;
@@ -70,6 +71,9 @@ export default class Options extends React.Component<IProps, IState> {
             <DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
           </div>
         </div>
+
+        <Divider />
+        
         <div className='OptionSection'>
           <div className='OptionLabel'>
             <Tr text="options.grasscutter_with_game" />