From 7b5b80d1d1a1afde565825a97efa01a4e98dbe55 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Thu, 29 Jan 2026 02:07:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20Improve=20logging=20for?=
 =?UTF-8?q?mat=20for=20feature=20flag=20and=20protected=20route=20navigati?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FeatureFlag.vue            | 45 +++++++++++++++++++
 .../pokedex.online/src/router/guards.js       |  8 +++-
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 code/websites/pokedex.online/src/components/FeatureFlag.vue

diff --git a/code/websites/pokedex.online/src/components/FeatureFlag.vue b/code/websites/pokedex.online/src/components/FeatureFlag.vue
new file mode 100644
index 0000000..6a276dc
--- /dev/null
+++ b/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>
diff --git a/code/websites/pokedex.online/src/router/guards.js b/code/websites/pokedex.online/src/router/guards.js
index f8f907e..f2a6d6e 100644
--- a/code/websites/pokedex.online/src/router/guards.js
+++ b/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})`
+      );
     }
   });
 }