wip

Author: rafaellehmkuhl

src/components/ExternalFeaturesDiscoveryModal.vue

@@ -293,7 +293,20 @@
             </div>
 
             <!-- Ignored Suggestions Section -->
-            <div v-if="ignoredJoystickSuggestionsByExtension.length > 0" class="mb-8">
+            <div v-if="ignoredJoystickSuggestionsByExtension.length > 0" class="mb-4">
+              <v-btn
+                variant="text"
+                color="grey-lighten-1"
+                class="opacity-70 hover:opacity-100"
+                :prepend-icon="showIgnoredMappings ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                @click="showIgnoredMappings = !showIgnoredMappings"
+              >
+                {{ showIgnoredMappings ? 'Hide ignored mappings' : 'Show ignored mappings' }}
+              </v-btn>
+            </div>
+
+            <!-- Ignored Suggestions Section -->
+            <div v-if="showIgnoredMappings && ignoredJoystickSuggestionsByExtension.length > 0" class="mb-8">
               <div class="flex items-center gap-2 mb-4">
                 <v-icon size="24" color="orange">mdi-close-circle</v-icon>
                 <h2 class="text-xl font-semibold">Ignored Mappings</h2>
@@ -595,6 +608,11 @@ const activeTab = ref('actions')
  */
 const showAppliedMappings = ref(false)
 
+/**
+ * Controls visibility of ignored mappings section
+ */
+const showIgnoredMappings = ref(false)
+
 /**
  * Action with extension name
  */
@@ -835,6 +853,13 @@ const ignoredJoystickSuggestionsByExtension = computed(() => {
     .filter((ext) => ext.suggestionGroups.length > 0)
 })
 
+/**
+ * Whether there are new extension features that still need user action
+ */
+const hasPendingBlueOSFeatures = computed(() => {
+  return filteredActions.value.length > 0 || filteredJoystickSuggestionsByExtension.value.length > 0
+})
+
 /**
  * Get the human-readable name for an action type
  * @param {customActionTypes} type - The action type
@@ -1241,7 +1266,7 @@ const checkForBlueOSFeatures = async (): Promise<void> => {
   ensureSelectedProfile()
 
   // Show modal if there are any features available
-  if (filteredActions.value.length > 0 || filteredJoystickSuggestionsByExtension.value.length > 0) {
+  if (hasPendingBlueOSFeatures.value) {
     isVisible.value = true
     // Set active tab based on what's available
     if (filteredJoystickSuggestionsByExtension.value.length > 0 && filteredActions.value.length === 0) {
@@ -1264,6 +1289,12 @@ watch(
     ensureSelectedProfile()
   }
 )
+
+watch(hasPendingBlueOSFeatures, (hasPending) => {
+  if (!hasPending) {
+    isVisible.value = false
+  }
+})
 </script>
 
 <style scoped>