Read description for changes

- Moved popup css code to globals
- Invoked rust code with download stuff
- Invoke the main script with progress
- Move popup code to `main.tsx`
- Don't use Strict Mode
- Made sidebar downloads menu do something
- And more

src/routes/Installs.tsx

@@ -1,29 +1,9 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './Installs.css'
-import { useEffect, useState } from 'react'
-import { faAdd, faRemove, faX } from '@fortawesome/free-solid-svg-icons'
-import { LauncherVersion } from '../types/LauncherVersion'
+import { useEffect } from 'react'
 import axios from 'axios'
 import { InstallsProps } from '../types/InstallsProps'
 
-export default function Installs({ downloadVersions, downloadProgress }: InstallsProps) {
-  const [showPopup, setShowPopup] = useState(false)
-  const [fadeOut, setFadeOut] = useState(false)
-  const [versionList, setVersionList] = useState<null | LauncherVersion[]>(null);
-  const [selectedVersionList, setSelectedVersionList] = useState<LauncherVersion[]>([]);
-
-  function downloadVersion () {
-    setShowPopup(true)
-    setFadeOut(false)
-  }
-
-  function handleOverlayClick (e: React.MouseEvent<HTMLDivElement>) {
-    if (e.target === e.currentTarget) {
-      setFadeOut(true)
-      setTimeout(() => setShowPopup(false), 200)
-    }
-  }
-
+export default function Installs({ downloadProgress, showPopup, setShowPopup, setPopupMode, setFadeOut, setSelectedVersionList, setVersionList }: InstallsProps) {
   useEffect(() => {
     if (!showPopup) return
     setSelectedVersionList([]);
@@ -38,58 +18,11 @@ export default function Installs({ downloadVersions, downloadProgress }: Install
       <p className='text-3xl ml-4 mt-4'>Installs</p>
       <button
         className='button text-3xl mt-4 absolute right-4 top-4'
-        onClick={downloadVersion}
+        onClick={() => { setPopupMode(0); setShowPopup(true); setFadeOut(false) }}
         disabled={downloadProgress.length != 0}
       >
         Download new version
       </button>
-      {showPopup && (
-        <div
-          className={`popup-overlay ${fadeOut ? 'fade-out' : ''}`}
-          onClick={handleOverlayClick}
-        >
-          <div className='popup-box'>
-            <button
-              className='close-button'
-              onClick={() => {
-                setFadeOut(true)
-                setTimeout(() => setShowPopup(false), 200)
-              }}
-            >
-              <FontAwesomeIcon icon={faX} />
-            </button>
-            <p className='text-xl text-center'>Select versions to download</p>
-            <div className='popup-content'>
-              {versionList == null ? (
-                <p className='text-center'>Downloading version list...</p>
-              ) : (
-                versionList.map((v, i) => 
-                  <div key={i} className='popup-entry'>
-                    <p className='text-2xl'>Berry Dash v{v.displayName}</p>
-                    <button className='button right-2 bottom-2' onClick={() => {
-                      if (!selectedVersionList) return
-                      if (!selectedVersionList.includes(v)) {
-                        setSelectedVersionList([...selectedVersionList, v])
-                      } else {
-                        setSelectedVersionList(selectedVersionList.filter(x => x !== v))
-                      }
-                    }}>{selectedVersionList.includes(v) ? <><FontAwesomeIcon icon={faRemove} /> Remove</> : <><FontAwesomeIcon icon={faAdd} /> Add</>}</button>
-                  </div>
-                )
-              )}
-            </div>
-            {versionList != null && (
-              <div className='flex justify-center'>
-                <button className='button w-fit mt-2 mb-[-16px]' onClick={() => {
-                  setFadeOut(true)
-                  setTimeout(() => setShowPopup(false), 200)
-                  downloadVersions(selectedVersionList)
-                }}>Download {selectedVersionList.length} version{selectedVersionList.length == 1 ? '' : 's'}</button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
     </>
   )
 }