Remove the manage button and make it a right-click instead. And also change the button height/width. Along with more re-arranging in layout.tsx

src/app/Globals.css

@@ -77,7 +77,7 @@ body {
 }
 
 .button {
-  @apply rounded-md cursor-pointer text-[16px] py-1.5 px-3 transition-colors border;
+  @apply rounded-md cursor-pointer text-[16px] py-1 px-2 transition-colors border;
 }
 
 .btntheme1 {

src/app/game/page.tsx

@@ -85,7 +85,7 @@ export default function Installs () {
                   title={
                     normalConfig?.settings.useLegacyInteractButtons
                       ? ''
-                      : 'Click to launch game'
+                      : 'Click to launch game. Right-click to manage this version install'
                   }
                   onClick={async () => {
                     if (normalConfig?.settings.useLegacyInteractButtons) return
@@ -99,6 +99,13 @@ export default function Installs () {
                       displayName: `${gameInfo.name} v${verInfo.versionName}`
                     })
                   }}
+                  onContextMenu={e => {
+                    e.preventDefault()
+                    setManagingVersion(entry)
+                    setPopupMode(2)
+                    setShowPopup(true)
+                    setFadeOut(false)
+                  }}
                   onMouseEnter={() => setHoveredIds(prev => [...prev, entry])}
                   onMouseLeave={() =>
                     setHoveredIds(prev => prev.filter(i => i !== i))
@@ -145,6 +152,9 @@ export default function Installs () {
                         className={`button ${
                           hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
                         }`}
+                        hidden={
+                          !normalConfig?.settings.useLegacyInteractButtons
+                        }
                         onClick={e => {
                           e.stopPropagation()
                           setManagingVersion(entry)

src/app/layout.tsx

@@ -45,7 +45,7 @@ import {
   requestPermission
 } from '@tauri-apps/plugin-notification'
 import VersionChangelog from './componets/VersionChangelog'
-import { BaseDirectory, remove } from '@tauri-apps/plugin-fs'
+import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -127,6 +127,52 @@ export default function RootLayout ({
     return Array.from(gamesMap.values())
   }
 
+  function getVersionsAmountData (gameId: number): {
+    installed: number
+    total: number
+  } | null {
+    if (!downloadedVersionsConfig || !serverVersionList) return null
+
+    const installed = downloadedVersionsConfig.list.filter(
+      v => getGameInfo(getVersionInfo(v)?.game)?.id === gameId
+    ).length
+
+    const total = serverVersionList.versions.filter(
+      v => getGameInfo(v?.game)?.id === gameId
+    ).length
+
+    return { installed, total }
+  }
+
+  function formatEtaSmart (seconds: number) {
+    if (seconds < 60) return `${Math.floor(seconds)}s`
+    if (seconds < 3600)
+      return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`
+    if (seconds < 86400) {
+      const h = Math.floor(seconds / 3600)
+      const m = Math.floor((seconds % 3600) / 60)
+      return `${h}h ${m}m`
+    }
+    const d = Math.floor(seconds / 86400)
+    const h = Math.floor((seconds % 86400) / 3600)
+    return `${d}d ${h}h`
+  }
+
+  function closePopup () {
+    if (popupMode == 0 && selectedGame && pathname === '/') {
+      setSelectedGame(null)
+      setSelectedVersionList([])
+    } else if (viewingInfoFromDownloads) {
+      setViewingInfoFromDownloads(false)
+      setPopupMode(0)
+    } else if (popupMode == 4) {
+      setPopupMode(3)
+    } else {
+      setFadeOut(true)
+      setTimeout(() => setShowPopup(false), 200)
+    }
+  }
+
   useEffect(() => {
     let unlistenProgress: (() => void) | null = null
 
@@ -301,52 +347,6 @@ export default function RootLayout ({
       await notifyUser('Downloads Finished', 'All downloads have finished.')
   }
 
-  function getVersionsAmountData (gameId: number): {
-    installed: number
-    total: number
-  } | null {
-    if (!downloadedVersionsConfig || !serverVersionList) return null
-
-    const installed = downloadedVersionsConfig.list.filter(
-      v => getGameInfo(getVersionInfo(v)?.game)?.id === gameId
-    ).length
-
-    const total = serverVersionList.versions.filter(
-      v => getGameInfo(v?.game)?.id === gameId
-    ).length
-
-    return { installed, total }
-  }
-
-  function formatEtaSmart (seconds: number) {
-    if (seconds < 60) return `${Math.floor(seconds)}s`
-    if (seconds < 3600)
-      return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`
-    if (seconds < 86400) {
-      const h = Math.floor(seconds / 3600)
-      const m = Math.floor((seconds % 3600) / 60)
-      return `${h}h ${m}m`
-    }
-    const d = Math.floor(seconds / 86400)
-    const h = Math.floor((seconds % 86400) / 3600)
-    return `${d}d ${h}h`
-  }
-
-  function closePopup () {
-    if (popupMode == 0 && selectedGame && pathname === '/') {
-      setSelectedGame(null)
-      setSelectedVersionList([])
-    } else if (viewingInfoFromDownloads) {
-      setViewingInfoFromDownloads(false)
-      setPopupMode(0)
-    } else if (popupMode == 4) {
-      setPopupMode(3)
-    } else {
-      setFadeOut(true)
-      setTimeout(() => setShowPopup(false), 200)
-    }
-  }
-
   return (
     <>
       <html lang='en' className={roboto.className}>
@@ -477,8 +477,8 @@ export default function RootLayout ({
                                     <p
                                       className={`text-2xl truncate ${
                                         selectedVersionList.includes(v.id)
-                                          ? 'max-w-80.5'
+                                          ? 'max-w-84.5'
-                                          : 'max-w-87.5'
+                                          : 'max-w-91.5'
                                       }`}
                                     >
                                       {getGameInfo(v.game)?.name} v
@@ -486,7 +486,7 @@ export default function RootLayout ({
                                     </p>
                                   </div>
                                   <button
-                                    className='button btntheme3 right-21.5 bottom-1.25'
+                                    className='button btntheme3 right-20.75 bottom-1.75'
                                     onClick={() => {
                                       setSelectedVersionList(prev =>
                                         prev.includes(v.id)
@@ -512,7 +512,7 @@ export default function RootLayout ({
                                     )}
                                   </button>
                                   <button
-                                    className='button btntheme3 right-1 bottom-1.25'
+                                    className='button btntheme3 right-1.5 bottom-1.75'
                                     onClick={() => {
                                       setManagingVersion(v.id)
                                       setViewingInfoFromDownloads(true)
@@ -723,7 +723,7 @@ export default function RootLayout ({
                               <button
                                 className='button btntheme2'
                                 disabled={downloadProgress.length != 0}
-                                onClick={() => {
+                                onClick={async () => {
                                   closePopup()
 
                                   setDownloadedVersionsConfig(prev => {
@@ -749,10 +749,15 @@ export default function RootLayout ({
                                     return updatedConfig
                                   })
 
-                                  remove('game/' + managingVersion, {
+                                  if (
-                                    baseDir: BaseDirectory.AppLocalData,
+                                    await exists('game/' + managingVersion, {
-                                    recursive: true
+                                      baseDir: BaseDirectory.AppLocalData
-                                  })
+                                    })
+                                  )
+                                    await remove('game/' + managingVersion, {
+                                      baseDir: BaseDirectory.AppLocalData,
+                                      recursive: true
+                                    })
                                 }}
                                 title='Click to uninstall this game. This will NOT remove any progress or any save files.'
                               >

src/app/settings/page.tsx

@@ -90,7 +90,7 @@ export default function Settings () {
             title="This setting will make it so when you are on a page like this, the games won't disappear."
           />
           <Setting
-            label='Show Installs/Launch Buttons'
+            label='Show Installs/Launch/Manage Buttons'
             value={useLegacyInteractButtons}
             onChange={async () => {
               while (normalConfig != null) {
@@ -112,7 +112,7 @@ export default function Settings () {
                 break
               }
             }}
-            title='Enable the legacy method of using the installs/launch buttons. In the future this setting may be removed so try and get used to the new method.'
+            title='Enable the legacy method of using the installs/launch/manage buttons. In the future this setting may be removed so try and get used to the new method.'
           />
           <div title='The theme you want the launcher to use.'>
             <label className='text-lg'>Theme:</label>