{
+ if (newContents === undefined) {
+ setEditingField(null)
+ return
+ }
+ void handleSaveField(newContents)
+ }}
+ />
+ )
+ }
+
+ return (
+ <>
+
+
+ {mod.name} {mod.installed?.wasModifiedLocally ? '(modified)' : ''}
+
+
+ {mod.description}
+
+
+ {mod.author && `Author: ${mod.author}\n`}
+ {mod.version && `Version: ${mod.version}\n`}
+ {mod.installedVersion && mod.installedVersion !== mod.version && `Installed version: ${mod.installedVersion}\n`}
+ {mod.section && `Section: ${mod.section}\n`}
+
+ {errors[mod.name]?.length > 0 && (
+
+
+ {errors[mod.name].map((error, i) => (
+ - {error}
+ ))}
+
+
+ )}
+
+ {mod.installed ? (
+ <>
+ {mod.activated ? (
+
+
+ )
+}
+
+const EditingCodeWindow = ({
+ contents,
+ language,
+ onClose
+}: {
+ contents: string,
+ language: string,
+ onClose: (newContents?: string) => void
+}) => {
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.preventDefault()
+ e.stopImmediatePropagation()
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown, { capture: true })
+ return () => window.removeEventListener('keydown', handleKeyDown, { capture: true })
+ }, [])
+
+ return
+
+
+
+
+}
+
+export default () => {
+ const isModalActive = useIsModalActive('mods', true)
+ const [modsData, setModsData] = useState(null)
+ const [search, setSearch] = useState('')
+ const [showOnlyInstalled, setShowOnlyInstalled] = useState(false)
+ const [showOnlyEnabled, setShowOnlyEnabled] = useState(false)
+ const [selectedModIndex, setSelectedModIndex] = useState(null)
+ const [expandedRepos, setExpandedRepos] = useState>({})
+ const useHorizontalLayout = usePassesScaledDimensions(400)
+ const { counter } = useSnapshot(modsReactiveUpdater)
+ const errors = useSnapshot(modsErrors)
+
+ const allModsArray = useMemo(() => {
+ if (!modsData) return []
+ return [
+ ...modsData.repos.flatMap(repo => repo.packages.map(mod => ({ ...mod, repo: repo.url }))),
+ ...modsData.modsWithoutRepos
+ ]
+ }, [modsData])
+
+ useEffect(() => {
+ if (isModalActive) {
+ if (appStorage.firstModsPageVisit) {
+ appStorage.firstModsPageVisit = false
+ const defaultRepo = 'zardoy/mcraft-client-mods'
+ void fetchRepository(defaultRepo, defaultRepo)
+ }
+ void getAllModsDisplayList().then(mods => {
+ setModsData(mods)
+ // Update selected mod index if needed
+ if (selectedModIndex !== null && selectedModIndex < allModsArray.length) {
+ setSelectedModIndex(selectedModIndex)
+ }
+ })
+ }
+ }, [isModalActive, counter])
+
+ if (!isModalActive) return null
+
+ const toggleRepo = (repoUrl: string) => {
+ setExpandedRepos(prev => ({
+ ...prev,
+ [repoUrl]: !prev[repoUrl]
+ }))
+ }
+
+ const modFilter = (mod: ModsData['repos'][0]['packages'][0]) => {
+ const matchesSearch = mod.name.toLowerCase().includes(search.toLowerCase()) ||
+ mod.description?.toLowerCase().includes(search.toLowerCase())
+ const matchesInstalledFilter = !showOnlyInstalled || mod.installed
+ const matchesEnabledFilter = !showOnlyEnabled || mod.activated
+ return matchesSearch && matchesInstalledFilter && matchesEnabledFilter
+ }
+
+ const filteredMods = modsData ? {
+ repos: modsData.repos.map(repo => ({
+ ...repo,
+ packages: repo.packages.filter(modFilter)
+ })),
+ modsWithoutRepos: modsData.modsWithoutRepos.filter(modFilter)
+ } : null
+
+ const filteredModsCount = filteredMods ?
+ filteredMods.repos.reduce((acc, repo) => acc + repo.packages.length, 0) + filteredMods.modsWithoutRepos.length : 0
+
+ const totalRepos = modsData?.repos.length ?? 0
+
+ const getStatsText = () => {
+ if (!filteredMods) return 'Loading...'
+ if (showOnlyEnabled) {
+ return `Showing ${filteredMods.repos.reduce((acc, repo) => acc + repo.packages.filter(mod => mod.activated).length, 0)} enabled mods in ${totalRepos} repos`
+ } else if (showOnlyInstalled) {
+ return `Showing ${filteredMods.repos.reduce((acc, repo) => acc + repo.packages.filter(mod => mod.installed).length, 0)} installed mods in ${totalRepos} repos`
+ }
+ return `Showing all ${totalRepos} repos with ${filteredModsCount} mods`
+ }
+
+ const selectedMod = selectedModIndex === null ? null : allModsArray[selectedModIndex]
+
+ return
+
+}
diff --git a/src/react/Screen.tsx b/src/react/Screen.tsx
index a17ede40..605ec28f 100644
--- a/src/react/Screen.tsx
+++ b/src/react/Screen.tsx
@@ -6,14 +6,15 @@ interface Props {
className?: string
titleSelectable?: boolean
titleMarginTop?: number
+ contentStyle?: React.CSSProperties
}
-export default ({ title, children, backdrop = true, style, className = '', titleSelectable, titleMarginTop }: Props) => {
+export default ({ title, children, backdrop = true, style, className = '', titleSelectable, titleMarginTop, contentStyle }: Props) => {
return (
<>
{backdrop === 'dirt' ? : backdrop ? : null}
-
+
diff --git a/src/react/SelectOption.tsx b/src/react/SelectOption.tsx
index 4df471c0..c7b7ab38 100644
--- a/src/react/SelectOption.tsx
+++ b/src/react/SelectOption.tsx
@@ -48,21 +48,33 @@ export const showOptionsModal = async
(
})
}
-type InputOption = {
- type: 'text' | 'checkbox'
+export type InputOption = {
+ type: 'text' | 'checkbox' | 'button'
defaultValue?: string | boolean
label?: string
+ placeholder?: string
+ onButtonClick?: () => void
}
export const showInputsModal = async >(
title: string,
inputs: T,
- { cancel = true, minecraftJsonMessage }: { cancel?: boolean, minecraftJsonMessage? } = {}
+ {
+ cancel = true,
+ minecraftJsonMessage,
+ showConfirm = true
+ }: {
+ cancel?: boolean,
+ minecraftJsonMessage?
+ showConfirm?: boolean
+ } = {}
): Promise<{
[K in keyof T]: T[K] extends { type: 'text' }
? string
: T[K] extends { type: 'checkbox' }
? boolean
- : never
+ : T[K] extends { type: 'button' }
+ ? string
+ : never
}> => {
showModal({ reactType: 'general-select' })
let minecraftJsonMessageParsed
@@ -81,7 +93,7 @@ export const showInputsModal = async >(
showCancel: cancel,
minecraftJsonMessage: minecraftJsonMessageParsed,
options: [],
- inputsConfirmButton: 'Confirm'
+ inputsConfirmButton: showConfirm ? 'Confirm' : ''
})
})
}
@@ -130,6 +142,7 @@ export default () => {
autoFocus
type='text'
defaultValue={input.defaultValue as string}
+ placeholder={input.placeholder}
onChange={(e) => {
inputValues.current[key] = e.target.value
}}
@@ -148,6 +161,15 @@ export default () => {
{label}
)}
+ {input.type === 'button' && (
+
+ )}
})}