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

This commit is contained in:
2026-01-07 18:29:17 -07:00
parent c56a903d55
commit a0a763ae57
4 changed files with 75 additions and 60 deletions

View File

@@ -77,7 +77,7 @@ body {
} }
.button { .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 { .btntheme1 {

View File

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

View File

@@ -45,7 +45,7 @@ import {
requestPermission requestPermission
} from '@tauri-apps/plugin-notification' } from '@tauri-apps/plugin-notification'
import VersionChangelog from './componets/VersionChangelog' 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({ const roboto = Roboto({
subsets: ['latin'] subsets: ['latin']
@@ -127,6 +127,52 @@ export default function RootLayout ({
return Array.from(gamesMap.values()) 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(() => { useEffect(() => {
let unlistenProgress: (() => void) | null = null let unlistenProgress: (() => void) | null = null
@@ -301,52 +347,6 @@ export default function RootLayout ({
await notifyUser('Downloads Finished', 'All downloads have finished.') 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 ( return (
<> <>
<html lang='en' className={roboto.className}> <html lang='en' className={roboto.className}>
@@ -477,8 +477,8 @@ export default function RootLayout ({
<p <p
className={`text-2xl truncate ${ className={`text-2xl truncate ${
selectedVersionList.includes(v.id) 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 {getGameInfo(v.game)?.name} v
@@ -486,7 +486,7 @@ export default function RootLayout ({
</p> </p>
</div> </div>
<button <button
className='button btntheme3 right-21.5 bottom-1.25' className='button btntheme3 right-20.75 bottom-1.75'
onClick={() => { onClick={() => {
setSelectedVersionList(prev => setSelectedVersionList(prev =>
prev.includes(v.id) prev.includes(v.id)
@@ -512,7 +512,7 @@ export default function RootLayout ({
)} )}
</button> </button>
<button <button
className='button btntheme3 right-1 bottom-1.25' className='button btntheme3 right-1.5 bottom-1.75'
onClick={() => { onClick={() => {
setManagingVersion(v.id) setManagingVersion(v.id)
setViewingInfoFromDownloads(true) setViewingInfoFromDownloads(true)
@@ -723,7 +723,7 @@ export default function RootLayout ({
<button <button
className='button btntheme2' className='button btntheme2'
disabled={downloadProgress.length != 0} disabled={downloadProgress.length != 0}
onClick={() => { onClick={async () => {
closePopup() closePopup()
setDownloadedVersionsConfig(prev => { setDownloadedVersionsConfig(prev => {
@@ -749,7 +749,12 @@ export default function RootLayout ({
return updatedConfig return updatedConfig
}) })
remove('game/' + managingVersion, { if (
await exists('game/' + managingVersion, {
baseDir: BaseDirectory.AppLocalData
})
)
await remove('game/' + managingVersion, {
baseDir: BaseDirectory.AppLocalData, baseDir: BaseDirectory.AppLocalData,
recursive: true recursive: true
}) })

View File

@@ -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." title="This setting will make it so when you are on a page like this, the games won't disappear."
/> />
<Setting <Setting
label='Show Installs/Launch Buttons' label='Show Installs/Launch/Manage Buttons'
value={useLegacyInteractButtons} value={useLegacyInteractButtons}
onChange={async () => { onChange={async () => {
while (normalConfig != null) { while (normalConfig != null) {
@@ -112,7 +112,7 @@ export default function Settings () {
break 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.'> <div title='The theme you want the launcher to use.'>
<label className='text-lg'>Theme:</label> <label className='text-lg'>Theme:</label>