WIP, custom API Modes

src/popup/Popup.jsx

@@ -62,6 +62,7 @@ function Popup() {
   const [config, setConfig] = useState(defaultConfig)
   const [currentVersion, setCurrentVersion] = useState('')
   const [latestVersion, setLatestVersion] = useState('')
+  const [tabIndex, setTabIndex] = useState(0)
   const theme = useWindowTheme()
 
   const updateConfig = async (value) => {
@@ -94,7 +95,13 @@ function Popup() {
   return (
     <div className={popup === 'true' ? 'container-popup-mode' : 'container-page-mode'}>
       <form style="width:100%;">
-        <Tabs selectedTabClassName="popup-tab--selected">
+        <Tabs
+          selectedTabClassName="popup-tab--selected"
+          selectedIndex={tabIndex}
+          onSelect={(index) => {
+            setTabIndex(index)
+          }}
+        >
           <TabList>
             <Tab className="popup-tab">{t('General')}</Tab>
             <Tab className="popup-tab">{t('Feature Pages')}</Tab>
@@ -103,7 +110,7 @@ function Popup() {
           </TabList>
 
           <TabPanel>
-            <GeneralPart config={config} updateConfig={updateConfig} />
+            <GeneralPart config={config} updateConfig={updateConfig} setTabIndex={setTabIndex} />
           </TabPanel>
           <TabPanel>
             <FeaturePages config={config} updateConfig={updateConfig} />

src/popup/sections/GeneralPart.jsx

@@ -27,10 +27,12 @@ import Browser from 'webextension-polyfill'
 import { languageList } from '../../config/language.mjs'
 import PropTypes from 'prop-types'
 import { config as menuConfig } from '../../content-script/menu-tools'
+import { PencilIcon } from '@primer/octicons-react'
 
 GeneralPart.propTypes = {
   config: PropTypes.object.isRequired,
   updateConfig: PropTypes.func.isRequired,
+  setTabIndex: PropTypes.func.isRequired,
 }
 
 function formatDate(date) {
@@ -86,7 +88,7 @@ async function checkBilling(apiKey, apiUrl) {
   }
 }
 
-export function GeneralPart({ config, updateConfig }) {
+export function GeneralPart({ config, updateConfig, setTabIndex }) {
   const { t, i18n } = useTranslation()
   const [balance, setBalance] = useState(null)
   const [apiModes, setApiModes] = useState([])
@@ -154,7 +156,18 @@ export function GeneralPart({ config, updateConfig }) {
         </select>
       </label>
       <label>
-        <legend>{t('API Mode')}</legend>
+        <legend style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          {t('API Mode')}
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={(e) => {
+              e.preventDefault()
+              setTabIndex(2)
+            }}
+          >
+            <PencilIcon />
+          </div>
+        </legend>
         <span style="display: flex; gap: 15px;">
           <select
             style={