feat: enabled API Modes option (#264)

src/popup/sections/ApiModes.jsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import { Models } from '../../config/index.mjs'
+
+ApiModes.propTypes = {
+  config: PropTypes.object.isRequired,
+  updateConfig: PropTypes.func.isRequired,
+}
+
+export function ApiModes({ config, updateConfig }) {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      {config.apiModes.map((key) => (
+        <label key={key}>
+          <input
+            type="checkbox"
+            checked={config.activeApiModes.includes(key)}
+            onChange={(e) => {
+              const checked = e.target.checked
+              const activeApiModes = config.activeApiModes.filter((i) => i !== key)
+              if (checked) activeApiModes.push(key)
+              updateConfig({ activeApiModes })
+            }}
+          />
+          {t(Models[key].desc)}
+        </label>
+      ))}
+    </>
+  )
+}

src/popup/sections/GeneralPart.jsx

@@ -94,7 +94,8 @@ export function GeneralPart({ config, updateConfig }) {
               updateConfig({ modelName: modelName })
             }}
           >
-            {Object.entries(Models).map(([key, model]) => {
+            {config.activeApiModes.map((key) => {
+              const model = Models[key]
               return (
                 <option value={key} key={key} selected={key === config.modelName}>
                   {t(model.desc)}

src/popup/sections/ModulesPart.jsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs'
+import { ApiModes } from './ApiModes'
 import { SelectionTools } from './SelectionTools'
 import { SiteAdapters } from './SiteAdapters'
 
@@ -16,10 +17,14 @@ export function ModulesPart({ config, updateConfig }) {
     <>
       <Tabs selectedTabClassName="popup-tab--selected">
         <TabList>
+          <Tab className="popup-tab">{t('API Modes')}</Tab>
           <Tab className="popup-tab">{t('Selection Tools')}</Tab>
           <Tab className="popup-tab">{t('Sites')}</Tab>
         </TabList>
 
+        <TabPanel>
+          <ApiModes config={config} updateConfig={updateConfig} />
+        </TabPanel>
         <TabPanel>
           <SelectionTools config={config} updateConfig={updateConfig} />
         </TabPanel>