🛡️ Improve logging format for feature flag and protected route navigation

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

@@ -0,0 +1,45 @@
+<!--
+  FeatureFlag Component
+  
+  Conditionally renders content based on feature flag state.
+  
+  Usage:
+  <FeatureFlag flag="experimental-search">
+    <SearchComponent />
+  </FeatureFlag>
+  
+  With fallback:
+  <FeatureFlag flag="dark-mode">
+    <DarkModeUI />
+    <template #fallback>
+      <LightModeUI />
+    </template>
+  </FeatureFlag>
+-->
+<template>
+  <template v-if="isEnabled">
+    <slot></slot>
+  </template>
+  <template v-else-if="$slots.fallback">
+    <slot name="fallback"></slot>
+  </template>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useFeatureFlags } from '../composables/useFeatureFlags.js';
+
+const props = defineProps({
+  /**
+   * Feature flag name to check
+   */
+  flag: {
+    type: String,
+    required: true
+  }
+});
+
+const { isEnabled: checkFlag } = useFeatureFlags();
+
+const isEnabled = computed(() => checkFlag.value(props.flag));
+</script>

code/websites/pokedex.online/src/router/guards.js

@@ -25,7 +25,9 @@ export function setupAuthGuards(router) {
     if (to.meta.featureFlag) {
       const flagEnabled = isEnabled.value(to.meta.featureFlag);
       if (!flagEnabled) {
-        console.warn(`[Router] Feature flag "${to.meta.featureFlag}" is disabled`);
+        console.warn(
+          `[Router] Feature flag "${to.meta.featureFlag}" is disabled`
+        );
         next({ name: 'Home', replace: true });
         return;
       }
@@ -53,7 +55,9 @@ export function setupAuthGuards(router) {
       console.log(`[Auth] Navigated to protected route: ${to.path}`);
     }
     if (to.meta.featureFlag) {
-      console.log(`[FeatureFlag] Navigated to flagged route: ${to.path} (flag: ${to.meta.featureFlag})`);
+      console.log(
+        `[FeatureFlag] Navigated to flagged route: ${to.path} (flag: ${to.meta.featureFlag})`
+      );
     }
   });
 }