Merge remote-tracking branch 'origin/pr/289' into dev

src/features/providers/sheets/forms/BaseProviderForm.tsx

@@ -635,7 +635,20 @@ export function BaseProviderForm({
           defaultOpen
         >
           <div className={styles.entriesList}>
-            <div className={styles.entriesToolbar}>
+            <div className={`${styles.entriesToolbar} ${styles.entriesToolbarSplit}`}>
+              {/* Add entry button on the left */}
+              <button
+                type="button"
+                className={styles.addBtn}
+                disabled={mutating}
+                onClick={() =>
+                  updateField('apiKeyEntries', [...apiKeyEntries, emptyApiKeyEntry()])
+                }
+              >
+                <IconPlus size={12} />
+                <span>{t('providersPage.form.addApiKeyEntry')}</span>
+              </button>
+              {/* Test all button on the right */}
               <button
                 type="button"
                 className={styles.connectivityBtn}
@@ -650,16 +663,17 @@ export function BaseProviderForm({
                 <span>{t('providersPage.connectivity.testAll')}</span>
               </button>
             </div>
-            {apiKeyEntries.map((entry, idx) => {
-              const status = connectivity.openaiStatuses[idx] ?? {
+            {[...apiKeyEntries].reverse().map((entry, visualIdx) => {
+              const realIdx = apiKeyEntries.length - 1 - visualIdx;
+              const status = connectivity.openaiStatuses[realIdx] ?? {
                 state: 'idle' as ConnectivityState,
                 message: '',
               };
               return (
-                <div key={idx} className={styles.entryCard}>
+                <div key={realIdx} className={styles.entryCard}>
                   <div className={styles.entryCardHeader}>
                     <span>
-                      {t('providersPage.form.apiKeyEntry', { index: idx + 1 })}
+                      {t('providersPage.form.apiKeyEntry', { index: realIdx + 1 })}
                     </span>
                     <div className={styles.entryCardHeaderRight}>
                       <ConnectivityStatusIcon state={status.state} />
@@ -667,7 +681,7 @@ export function BaseProviderForm({
                         type="button"
                         className={styles.connectivityBtnGhost}
                         disabled={mutating || status.state === 'loading'}
-                        onClick={() => void connectivity.runOpenAIKey(idx)}
+                        onClick={() => void connectivity.runOpenAIKey(realIdx)}
                       >
                         {status.state === 'loading' ? (
                           <span className={`${styles.statusIcon} ${styles.statusIconLoading}`}>
@@ -683,7 +697,7 @@ export function BaseProviderForm({
                         onClick={() =>
                           updateField(
                             'apiKeyEntries',
-                            apiKeyEntries.filter((_, i) => i !== idx)
+                            apiKeyEntries.filter((_, i) => i !== realIdx)
                           )
                         }
                       >
@@ -703,7 +717,7 @@ export function BaseProviderForm({
                         updateField(
                           'apiKeyEntries',
                           apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, apiKey: e.target.value } : it
+                            i === realIdx ? { ...it, apiKey: e.target.value } : it
                           )
                         )
                       }
@@ -722,7 +736,7 @@ export function BaseProviderForm({
                         updateField(
                           'apiKeyEntries',
                           apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, proxyUrl: e.target.value } : it
+                            i === realIdx ? { ...it, proxyUrl: e.target.value } : it
                           )
                         )
                       }
@@ -746,7 +760,7 @@ export function BaseProviderForm({
                         updateField(
                           'apiKeyEntries',
                           apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, headersText: e.target.value } : it
+                            i === realIdx ? { ...it, headersText: e.target.value } : it
                           )
                         )
                       }
@@ -762,17 +776,6 @@ export function BaseProviderForm({
                 </div>
               );
             })}
-            <button
-              type="button"
-              className={styles.addBtn}
-              disabled={mutating}
-              onClick={() =>
-                updateField('apiKeyEntries', [...apiKeyEntries, emptyApiKeyEntry()])
-              }
-            >
-              <IconPlus size={12} />
-              <span>{t('providersPage.form.addApiKeyEntry')}</span>
-            </button>
           </div>
         </Collapsible>
       ) : null}

src/features/providers/sheets/forms/sharedForm.module.scss

@@ -221,6 +221,10 @@
   margin-bottom: 2px;
 }
 
+.entriesToolbarSplit {
+  justify-content: space-between;
+}
+
 .connectivityRow {
   display: flex;
   align-items: center;