Move mod repository adding to a new tab using the new INPUT_FIELD option

Author: krypciak

CHANGELOG.md

@@ -8,6 +8,10 @@
 
 - Added new mod option type `INPUT_FIELD`
 
+### Changed
+
+- Move repository adding from a popup to a separate tab in CCModManager's options
+
 ### Fixed
 
 - Improve browser compatibility

src/gui/list.ts

@@ -2,12 +2,11 @@ import { ModEntry } from '../types'
 import { ModDB } from '../moddb'
 import { Fliters, createFuzzyFilteredModList } from '../filters'
 import { LocalMods } from '../local-mods'
-import './list-entry'
-import './repo-add'
 import { InstallQueue } from '../mod-installer'
 import { Lang } from '../lang-manager'
 import { Opts } from '../options'
 import { isFullMode } from '../plugin'
+import './list-entry'
 
 declare global {
     namespace modmanager.gui {

src/gui/menu.ts

@@ -43,7 +43,6 @@ declare global {
             checkUpdatesButton: sc.ButtonGui
             filtersButton: sc.ButtonGui
             filtersPopup: modmanager.gui.FiltersPopup
-            reposPopup: modmanager.gui.RepoAddPopup
             changelogButton: sc.ButtonGui
             changelogPopup?: modmanager.gui.Changelog
 
@@ -544,10 +543,6 @@ modmanager.gui.Menu = sc.ListInfoMenu.extend({
         sc.menu.pushMenu(sc.MENU_SUBMENU.MOD_OPTIONS)
         modmanager.gui.optionsMenu.updateEntries(mod)
     },
-    openRepositoriesPopup() {
-        this.reposPopup ??= new modmanager.gui.RepoAddPopup()
-        this.reposPopup.show()
-    },
     openChangelogPopup(mod) {
         this.changelogPopup ??= new modmanager.gui.Changelog()
         this.changelogPopup.setMod(mod)

src/gui/repo-add.ts

@@ -2,6 +2,7 @@ import { ModEntry, ModEntryLocal, ModEntryServer, NPDatabase } from './types'
 import { FileCache } from './cache'
 import { Opts } from './options'
 import { semver } from './library-providers'
+import { modDatabasesToInputFields } from './repo-add'
 
 export class ModDB {
     private static databasesLoaded: boolean = false
@@ -26,6 +27,7 @@ export class ModDB {
         }
 
         ModDB.testingOptInModIds = new Set(Opts.testingOptInMods)
+        modDatabasesToInputFields()
     }
 
     static repoURLToFileName(url: string): string {

src/moddb.ts

@@ -1,5 +1,6 @@
 import { FileCache } from './cache'
 import { ModInstallDialogs } from './gui/install-dialogs'
+import { modDatabasesToInputFields, repoChangeEvent, repoIsValid } from './repo-add'
 import { Lang } from './lang-manager'
 import { LocalMods } from './local-mods'
 import { InstallQueue } from './mod-installer'
@@ -21,33 +22,6 @@ export function registerOpts() {
                         type: 'CHECKBOX',
                         init: true,
                     },
-                    repositoriesButton: {
-                        type: 'BUTTON',
-                        onPress() {
-                            modmanager.gui.menu.openRepositoriesPopup()
-                        },
-                    },
-                    resetRepositoriesButton: {
-                        type: 'BUTTON',
-                        onPress() {
-                            Opts.repositories = Opts.flatOpts.repositories.init
-                            sc.Dialogs.showInfoDialog(Lang.opts.resetRepositoriesButton.onclickPopup)
-                        },
-                    },
-
-                    repositories: {
-                        type: 'JSON_DATA',
-                        init: ['@CCDirectLink/CCModDB/stable', '@CCDirectLink/CCModDB/testing'] as string[],
-                        changeEvent() {
-                            if (!ig.game) return
-
-                            ModDB.loadDatabases(true)
-
-                            ModDB.loadAllMods(false).then(() => {
-                                LocalMods.refreshOrigin()
-                            })
-                        },
-                    },
                     testingOptInMods: {
                         type: 'JSON_DATA',
                         init: [] as string[],
@@ -127,6 +101,52 @@ export function registerOpts() {
                 },
             },
         },
+        repositories: {
+            settings: {
+                tabIcon: 'interface',
+                title: 'Repositories',
+            },
+            headers: {
+                repositories: {
+                    resetRepositoriesButton: {
+                        type: 'BUTTON',
+                        onPress() {
+                            Opts.repositories = Opts.flatOpts.repositories.init
+                            modDatabasesToInputFields()
+
+                            if (sc.menu?.currentMenu == sc.MENU_SUBMENU?.MOD_OPTIONS) {
+                                modmanager.gui.optionsMenu.reopenMenu()
+                            }
+                            sc.Dialogs.showInfoDialog(Lang.opts.resetRepositoriesButton.onclickPopup)
+                        },
+                    },
+
+                    repositories: {
+                        type: 'JSON_DATA',
+                        init: ['@CCDirectLink/CCModDB/stable', '@CCDirectLink/CCModDB/testing'] as string[],
+                        changeEvent() {
+                            if (!ig.game) return
+
+                            ModDB.loadDatabases(true)
+
+                            ModDB.loadAllMods(false).then(() => {
+                                LocalMods.refreshOrigin()
+                            })
+                        },
+                    },
+                    // prettier-ignore
+                    ...{
+                    inputFieldRepo0: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    inputFieldRepo1: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    inputFieldRepo2: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    inputFieldRepo3: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    inputFieldRepo4: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    inputFieldRepo5: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    inputFieldRepo6: { type: 'INPUT_FIELD', init: '', changeEvent: repoChangeEvent, isValid: repoIsValid },
+                    },
+                },
+            },
+        },
     } as const satisfies Options
     Opts = modmanager.registerAndGetModOptions(
         {