🛡️ 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>