From a848110decb9f56d4c152ea7325f4cfb1df64a19 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Thu, 29 Jan 2026 06:26:45 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9B=EF=B8=8F=20Replace=20inline=20API?=
 =?UTF-8?q?=20version=20and=20settings=20controls=20with=20reusable=20`Api?=
 =?UTF-8?q?VersionSelector`=20component=20and=20update=20imports=20accordi?=
 =?UTF-8?q?ngly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ChallongeTest.vue               | 76 ++++---------------
 1 file changed, 15 insertions(+), 61 deletions(-)

diff --git a/code/websites/pokedex.online/src/views/ChallongeTest.vue b/code/websites/pokedex.online/src/views/ChallongeTest.vue
index 12c80c2..16240e9 100644
--- a/code/websites/pokedex.online/src/views/ChallongeTest.vue
+++ b/code/websites/pokedex.online/src/views/ChallongeTest.vue
@@ -12,59 +12,15 @@
       <!-- API Version & Settings Controls -->
       <div v-if="apiKey" class="section controls-section">
         <div class="controls-grid">
-          <!-- API Version Selector -->
-          <div class="control-group">
-            <label class="control-label">API Version:</label>
-            <div class="radio-group">
-              <label class="radio-option">
-                <input type="radio" v-model="apiVersion" value="v1" />
-                <span>v1 (Legacy)</span>
-              </label>
-              <label class="radio-option">
-                <input type="radio" v-model="apiVersion" value="v2.1" />
-                <span>v2.1 (Current)</span>
-              </label>
-            </div>
-            <span
-              class="version-badge"
-              :class="'badge-' + apiVersion.replace('.', '-')"
-            >
-              Using API {{ apiVersion }}
-            </span>
-          </div>
-
-          <!-- Results Per Page (v2.1 only) -->
-          <div v-if="apiVersion === 'v2.1'" class="control-group">
-            <label class="control-label">Results per page:</label>
-            <select
-              v-model.number="perPage"
-              @change="changePerPage(perPage)"
-              class="select-input"
-            >
-              <option :value="10">10</option>
-              <option :value="25">25</option>
-              <option :value="50">50</option>
-              <option :value="100">100</option>
-            </select>
-          </div>
-
-          <!-- Tournament Scope (v2.1 only) -->
-          <div v-if="apiVersion === 'v2.1'" class="control-group">
-            <label class="control-label">Tournament scope:</label>
-            <select v-model="tournamentScope" class="select-input">
-              <option :value="ScopeType.USER">User (default)</option>
-              <option :value="ScopeType.APPLICATION">
-                Application (requires application:manage token)
-              </option>
-            </select>
-            <div class="info-badge" v-if="tournamentScope === ScopeType.USER">
-              ✓ USER scope - tournaments you created or administer
-            </div>
-            <div class="info-badge warning" v-else>
-              ⓘ APPLICATION scope requires a client-credentials token with
-              application:manage
-            </div>
-          </div>
+          <!-- API Version Selector Component -->
+          <ApiVersionSelector
+            v-model="apiVersion"
+            v-model:per-page="perPage"
+            v-model:scope="tournamentScope"
+            :show-per-page="true"
+            :show-scope="true"
+            @update:per-page="changePerPage"
+          />
 
           <!-- API Key Configuration -->
           <div class="control-group collapsible-group">
@@ -402,14 +358,12 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { useChallongeApiKey } from '../composables/useChallongeApiKey.js';
 import { useChallongeOAuth } from '../composables/useChallongeOAuth.js';
 import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js';
-import { useAsyncState } from '../composables/useAsyncState.js';
-import {
-  createChallongeV1Client,
-  createChallongeV2Client,
-  AuthType,
-  ScopeType
-} from '../services/challonge.service.js';
-import { queryAllTournaments } from '../utilities/tournament-query.js';
+import { useChallongeClient } from '../composables/useChallongeClient.js';
+import { useChallongeTests } from '../composables/useChallongeTests.js';
+import ApiVersionSelector from '../components/challonge/ApiVersionSelector.vue';
+import TournamentGrid from '../components/challonge/TournamentGrid.vue';
+import TournamentDetail from '../components/challonge/TournamentDetail.vue';
+import { ScopeType } from '../services/challonge.service.js';
 
 const { getApiKey } = useChallongeApiKey();
 const {