Add managing versions menu & fix a typo

src/main.tsx

@@ -50,8 +50,15 @@ function App () {
   const [downloadedVersionsConfig, setDownloadedVersionsConfig] =
     useState<VersionsConfig | null>(null)
   const [normalConfig, setNormalConfig] = useState<NormalConfig | null>(null)
+  const [managingVersion, setManagingVersion] =
+    useState<DownloadedVersion | null>(null)
 
   function runNext () {
+    if (activeDownloads.current === 0 && queue.current.length === 0) {
+      setFadeOut(true)
+      setTimeout(() => setShowPopup(false), 200)
+      return
+    }
     if (activeDownloads.current >= 3 || queue.current.length === 0) return
     activeDownloads.current++
     const next = queue.current.shift()
@@ -133,10 +140,32 @@ function App () {
       )
     })
 
+    const unlistenUninstalled = listen<string>(
+      'version-uninstalled',
+      async event => {
+        const versionName = event.payload
+        setDownloadedVersionsConfig(prev => {
+          if (!prev) return prev
+          const updatedList = prev.list.filter(
+            v => v.version.version !== versionName
+          )
+          const updatedConfig = { ...prev, list: updatedList }
+          writeVersionsConfig(updatedConfig)
+          if (popupMode === 2) {
+            setManagingVersion(null)
+            setFadeOut(true)
+            setTimeout(() => setShowPopup(false), 200)
+          }
+          return updatedConfig
+        })
+      }
+    )
+
     return () => {
       unlistenProgress.then(f => f())
       unlistenDone.then(f => f())
       unlistenFailed.then(f => f())
+      unlistenUninstalled.then(f => f())
     }
   }, [downloadedVersionsConfig])
 
@@ -246,6 +275,7 @@ function App () {
           setVersionList={setVersionList}
           downloadedVersionsConfig={downloadedVersionsConfig}
           normalConfig={normalConfig}
+          setManagingVersion={setManagingVersion}
         />
       )
     } else if (hash === '#settings') {
@@ -411,6 +441,38 @@ function App () {
                     )}
                   </div>
                 </>
+              ) : popupMode === 2 ? (
+                managingVersion ? (
+                  <>
+                    <p className='text-xl text-center'>
+                      Manage version {managingVersion.version.displayName}
+                    </p>
+                    <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
+                      <button
+                        className='button'
+                        onClick={() =>
+                          invoke('uninstall_version', {
+                            name: managingVersion.version.version
+                          })
+                        }
+                      >
+                        Uninstall
+                      </button>
+                      <button
+                        className='button'
+                        onClick={async () =>
+                          invoke('open_folder', {
+                            name: managingVersion.version.version
+                          })
+                        }
+                      >
+                        Open Folder
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <p className='text-xl text-center'>No version selected</p>
+                )
               ) : null}
               {popupMode == 0 && versionList != null && (
                 <div className='flex justify-center'>

src/routes/Installs.tsx

@@ -16,7 +16,8 @@ export default function Installs ({
   setSelectedVersionList,
   setVersionList,
   downloadedVersionsConfig,
-  normalConfig
+  normalConfig,
+  setManagingVersion
 }: InstallsProps) {
   useEffect(() => {
     if (!showPopup) return
@@ -49,7 +50,7 @@ export default function Installs ({
   return (
     <div className='mx-4 mt-4'>
       <div className='flex justify-between items-center mb-4'>
-        <p className='text-3xl'>Install</p>
+        <p className='text-3xl'>Installs</p>
         <button
           className='button text-3xl'
           onClick={() => {
@@ -75,10 +76,21 @@ export default function Installs ({
                     </p>
                     <p className='text-gray-400 text-md'>
                       Installed{' '}
-                      {format(new Date(entry.installDate), 'yyyy/MM/dd')}
+                      {format(new Date(entry.installDate), 'MM/dd/yyyy')}
                     </p>
                   </div>
                   <div className='flex flex-row items-center gap-2'>
+                    <button
+                      className='button'
+                      onClick={async () => {
+                        setManagingVersion(entry)
+                        setPopupMode(2)
+                        setShowPopup(true)
+                        setFadeOut(false)
+                      }}
+                    >
+                      Manage
+                    </button>
                     <button
                       className='button'
                       onClick={async () => {

src/types/InstallsProps.ts

@@ -1,3 +1,4 @@
+import { DownloadedVersion } from './DownloadedVersion'
 import { DownloadProgress } from './DownloadProgress'
 import { LauncherVersion } from './LauncherVersion'
 import { NormalConfig } from './NormalConfig'
@@ -13,4 +14,5 @@ export type InstallsProps = {
   setVersionList: (v: null | LauncherVersion[]) => void
   downloadedVersionsConfig: VersionsConfig | null
   normalConfig: NormalConfig | null
+  setManagingVersion: (v: DownloadedVersion | null) => void
 }