🛠️ Add Developer Tools component for development mode with improved formatting and functionality adjustments

code/websites/pokedex.online/src/App.vue

@@ -5,10 +5,14 @@
         <component :is="Component" />
       </Transition>
     </router-view>
+    <!-- Developer Tools Panel (development only) -->
+    <DeveloperTools />
   </div>
 </template>
 
 <script setup>
+import DeveloperTools from './components/DeveloperTools.vue';
+
 // App now acts as the router container with transitions
 </script>
 

code/websites/pokedex.online/src/components/DeveloperTools.vue

@@ -23,8 +23,13 @@
                       @change="toggleFlag(flag.name)"
                     />
                     <code>{{ flag.name }}</code>
-                    <span v-if="flag.hasOverride" class="override-badge">override</span>
-                    <span v-if="flag.requiresPermission && !flag.hasPermission" class="locked-badge">
+                    <span v-if="flag.hasOverride" class="override-badge"
+                      >override</span
+                    >
+                    <span
+                      v-if="flag.requiresPermission && !flag.hasPermission"
+                      class="locked-badge"
+                    >
                       🔒
                     </span>
                   </label>
@@ -33,7 +38,9 @@
               </div>
             </div>
             <div class="button-group">
-              <button @click="resetAll" class="btn btn-secondary">Reset All Overrides</button>
+              <button @click="resetAll" class="btn btn-secondary">
+                Reset All Overrides
+              </button>
             </div>
           </div>
 
@@ -52,13 +59,19 @@
 
               <div v-if="user" class="info-item">
                 <span class="label">Role:</span>
-                <span class="value">{{ user.isAdmin ? '👑 Admin' : '👤 User' }}</span>
+                <span class="value">{{
+                  user.isAdmin ? '👑 Admin' : '👤 User'
+                }}</span>
               </div>
 
               <div v-if="user?.permissions" class="info-item full-width">
                 <span class="label">Permissions:</span>
                 <div class="tags">
-                  <span v-for="perm in user.permissions" :key="perm" class="tag">
+                  <span
+                    v-for="perm in user.permissions"
+                    :key="perm"
+                    class="tag"
+                  >
                     {{ perm }}
                   </span>
                 </div>
@@ -66,7 +79,11 @@
 
               <div v-if="token" class="info-item full-width">
                 <span class="label">Token (truncated):</span>
-                <code class="token">{{ token.substring(0, 20) }}...{{ token.substring(token.length - 10) }}</code>
+                <code class="token"
+                  >{{ token.substring(0, 20) }}...{{
+                    token.substring(token.length - 10)
+                  }}</code
+                >
               </div>
             </div>
           </div>
@@ -107,14 +124,20 @@ import { useAuth } from '../composables/useAuth.js';
 import { useFeatureFlags } from '../composables/useFeatureFlags.js';
 
 const { user, token } = useAuth();
-const { getFlags, toggle: toggleFlagOverride, resetAll: resetAllOverrides } = useFeatureFlags();
+const {
+  getFlags,
+  toggle: toggleFlagOverride,
+  resetAll: resetAllOverrides
+} = useFeatureFlags();
 
 const isOpen = ref(false);
 
 // Only show in development mode
 const isAvailable = computed(() => process.env.NODE_ENV === 'development');
 const nodeEnv = computed(() => process.env.NODE_ENV || 'unknown');
-const appVersion = computed(() => import.meta.env.VITE_APP_VERSION || '1.0.0-dev');
+const appVersion = computed(
+  () => import.meta.env.VITE_APP_VERSION || '1.0.0-dev'
+);
 
 const flags = computed(() => getFlags());
 
@@ -126,7 +149,7 @@ const close = () => {
   isOpen.value = false;
 };
 
-const toggleFlag = (flagName) => {
+const toggleFlag = flagName => {
   toggleFlagOverride(flagName);
 };
 
@@ -137,7 +160,7 @@ const resetAll = () => {
 };
 
 // Keyboard shortcut: Ctrl+Shift+D
-const handleKeyDown = (e) => {
+const handleKeyDown = e => {
   if (e.ctrlKey && e.shiftKey && e.code === 'KeyD') {
     e.preventDefault();
     if (isAvailable.value) {