refactor: simplify api config reordering logic

Author: elianiva

packages/types/src/global-settings.ts

@@ -37,7 +37,15 @@ export const globalSettingsSchema = z.object({
 	currentApiConfigName: z.string().optional(),
 	listApiConfigMeta: z.array(providerSettingsEntrySchema).optional(),
 	pinnedApiConfigs: z.record(z.string(), z.boolean()).optional(),
-	apiConfigCustomOrder: z.array(z.string()).optional(),
+	apiConfigsCustomOrder: z
+		.array(
+			z.object({
+				id: z.string(),
+				index: z.number(),
+				pinned: z.boolean(),
+			}),
+		)
+		.optional(),
 
 	lastShownAnnouncementId: z.string().optional(),
 	customInstructions: z.string().optional(),
@@ -251,7 +259,7 @@ export const EVALS_SETTINGS: RooCodeSettings = {
 	lastShownAnnouncementId: "jul-09-2025-3-23-0",
 
 	pinnedApiConfigs: {},
-	apiConfigCustomOrder: [],
+	apiConfigsCustomOrder: [],
 
 	autoApprovalEnabled: true,
 	alwaysAllowReadOnly: true,

src/core/webview/ClineProvider.ts

@@ -1814,7 +1814,7 @@ export class ClineProvider
 			openRouterImageApiKey,
 			openRouterImageGenerationSelectedModel,
 			openRouterUseMiddleOutTransform,
-			apiConfigCustomOrder,
+			apiConfigsCustomOrder,
 			featureRoomoteControlEnabled,
 		} = await this.getState()
 
@@ -1901,7 +1901,7 @@ export class ClineProvider
 			currentApiConfigName: currentApiConfigName ?? "default",
 			listApiConfigMeta: listApiConfigMeta ?? [],
 			pinnedApiConfigs: pinnedApiConfigs ?? {},
-			apiConfigCustomOrder: apiConfigCustomOrder ?? [],
+			apiConfigsCustomOrder: apiConfigsCustomOrder ?? [],
 			mode: mode ?? defaultModeSlug,
 			customModePrompts: customModePrompts ?? {},
 			customSupportPrompts: customSupportPrompts ?? {},
@@ -2125,7 +2125,7 @@ export class ClineProvider
 			currentApiConfigName: stateValues.currentApiConfigName ?? "default",
 			listApiConfigMeta: stateValues.listApiConfigMeta ?? [],
 			pinnedApiConfigs: stateValues.pinnedApiConfigs ?? {},
-			apiConfigCustomOrder: stateValues.apiConfigCustomOrder ?? [],
+			apiConfigsCustomOrder: stateValues.apiConfigsCustomOrder ?? [],
 			modeApiConfigs: stateValues.modeApiConfigs ?? ({} as Record<Mode, string>),
 			customModePrompts: stateValues.customModePrompts ?? {},
 			customSupportPrompts: stateValues.customSupportPrompts ?? {},

src/core/webview/webviewMessageHandler.ts

@@ -1636,45 +1636,80 @@ export const webviewMessageHandler = async (
 				await provider.postStateToWebview()
 			}
 			break
-		case "setApiConfigCustomOrder":
+		case "setApiConfigsCustomOrder":
 			if (message.values && Array.isArray(message.values.customOrder)) {
-				await updateGlobalState("apiConfigCustomOrder", message.values.customOrder)
-				await provider.postStateToWebview()
+				// Validate that each item has the required structure
+				const isValidOrder = message.values.customOrder.every(
+					(item: any) =>
+						typeof item === "object" &&
+						typeof item.id === "string" &&
+						typeof item.index === "number" &&
+						typeof item.pinned === "boolean",
+				)
+
+				if (isValidOrder) {
+					await updateGlobalState("apiConfigsCustomOrder", message.values.customOrder)
+					await provider.postStateToWebview()
+				}
 			}
 			break
 		case "moveApiConfigUp":
 			if (message.text) {
-				const currentOrder = getGlobalState("apiConfigCustomOrder") || []
-				const currentIndex = currentOrder.indexOf(message.text)
-
-				if (currentIndex > 0) {
-					// Swap with previous item
-					const newOrder = [...currentOrder]
-					;[newOrder[currentIndex - 1], newOrder[currentIndex]] = [
-						newOrder[currentIndex],
-						newOrder[currentIndex - 1],
-					]
-
-					await updateGlobalState("apiConfigCustomOrder", newOrder)
-					await provider.postStateToWebview()
+				const currentOrder = getGlobalState("apiConfigsCustomOrder") || []
+				const pinnedApiConfigs = getGlobalState("pinnedApiConfigs") || {}
+				const isPinned = !!pinnedApiConfigs[message.text]
+
+				// Find the item in the current order
+				const itemIndex = currentOrder.findIndex((item: any) => item.id === message.text)
+
+				if (itemIndex > 0) {
+					// Find previous item with same pinned status
+					const sameTypeItems = currentOrder.filter((item: any) => item.pinned === isPinned)
+					const currentItemInType = sameTypeItems.findIndex((item: any) => item.id === message.text)
+
+					if (currentItemInType > 0) {
+						const newOrder = [...currentOrder]
+						const prevItem = sameTypeItems[currentItemInType - 1]
+						const prevItemIndex = currentOrder.findIndex((item: any) => item.id === prevItem.id)
+
+						// Swap indices
+						const tempIndex = newOrder[itemIndex].index
+						newOrder[itemIndex].index = newOrder[prevItemIndex].index
+						newOrder[prevItemIndex].index = tempIndex
+
+						await updateGlobalState("apiConfigsCustomOrder", newOrder)
+						await provider.postStateToWebview()
+					}
 				}
 			}
 			break
 		case "moveApiConfigDown":
 			if (message.text) {
-				const currentOrder = getGlobalState("apiConfigCustomOrder") || []
-				const currentIndex = currentOrder.indexOf(message.text)
-
-				if (currentIndex < currentOrder.length - 1) {
-					// Swap with next item
-					const newOrder = [...currentOrder]
-					;[newOrder[currentIndex], newOrder[currentIndex + 1]] = [
-						newOrder[currentIndex + 1],
-						newOrder[currentIndex],
-					]
-
-					await updateGlobalState("apiConfigCustomOrder", newOrder)
-					await provider.postStateToWebview()
+				const currentOrder = getGlobalState("apiConfigsCustomOrder") || []
+				const pinnedApiConfigs = getGlobalState("pinnedApiConfigs") || {}
+				const isPinned = !!pinnedApiConfigs[message.text]
+
+				// Find the item in the current order
+				const itemIndex = currentOrder.findIndex((item: any) => item.id === message.text)
+
+				if (itemIndex !== -1 && itemIndex < currentOrder.length - 1) {
+					// Find next item with same pinned status
+					const sameTypeItems = currentOrder.filter((item: any) => item.pinned === isPinned)
+					const currentItemInType = sameTypeItems.findIndex((item: any) => item.id === message.text)
+
+					if (currentItemInType < sameTypeItems.length - 1) {
+						const newOrder = [...currentOrder]
+						const nextItem = sameTypeItems[currentItemInType + 1]
+						const nextItemIndex = currentOrder.findIndex((item: any) => item.id === nextItem.id)
+
+						// Swap indices
+						const tempIndex = newOrder[itemIndex].index
+						newOrder[itemIndex].index = newOrder[nextItemIndex].index
+						newOrder[nextItemIndex].index = tempIndex
+
+						await updateGlobalState("apiConfigsCustomOrder", newOrder)
+						await provider.postStateToWebview()
+					}
 				}
 			}
 			break

src/shared/ExtensionMessage.ts

@@ -214,7 +214,7 @@ export type ExtensionState = Pick<
 	| "currentApiConfigName"
 	| "listApiConfigMeta"
 	| "pinnedApiConfigs"
-	| "apiConfigCustomOrder"
+	| "apiConfigsCustomOrder"
 	// | "lastShownAnnouncementId"
 	| "customInstructions"
 	// | "taskHistory" // Optional in GlobalSettings, required here.

src/shared/WebviewMessage.ts

@@ -177,7 +177,7 @@ export interface WebviewMessage {
 		| "maxDiagnosticMessages"
 		| "searchFiles"
 		| "toggleApiConfigPin"
-		| "setApiConfigCustomOrder"
+		| "setApiConfigsCustomOrder"
 		| "moveApiConfigUp"
 		| "moveApiConfigDown"
 		| "setHistoryPreviewCollapsed"

webview-ui/src/components/chat/ApiConfigSelector.tsx

@@ -37,7 +37,7 @@ export const ApiConfigSelector = ({
 	togglePinnedApiConfig,
 }: ApiConfigSelectorProps) => {
 	const { t } = useTranslation()
-	const { apiConfigCustomOrder: customOrder = [] } = useExtensionState()
+	const { apiConfigsCustomOrder: customOrder = [] } = useExtensionState()
 	const [open, setOpen] = useState(false)
 	const [searchValue, setSearchValue] = useState("")
 	const [sortMode, setSortMode] = useState<SortMode>("alphabetical")