fix suggesting

Author: rafaellehmkuhl

src/components/ExternalFeaturesDiscoveryModal.vue

@@ -130,6 +130,14 @@
                         <div class="flex items-center gap-2 flex-grow">
                           <v-icon size="16" color="blue-lighten-2">mdi-folder-outline</v-icon>
                           <span class="text-sm font-semibold text-grey-lighten-1">{{ group.name }}</span>
+                          <v-tooltip v-if="group.description" location="top" max-width="320">
+                            <template #activator="{ props: tooltipProps }">
+                              <v-icon v-bind="tooltipProps" size="14" color="grey-lighten-1" class="cursor-help">
+                                mdi-information-outline
+                              </v-icon>
+                            </template>
+                            <span class="text-xs">{{ group.description }}</span>
+                          </v-tooltip>
                           <v-chip size="x-small" variant="outlined" color="blue">
                             {{ group.buttonMappingSuggestions.length }}
                           </v-chip>
@@ -156,6 +164,9 @@
                         </div>
                       </v-expansion-panel-title>
                       <v-expansion-panel-text>
+                        <p v-if="group.description" class="text-sm text-grey-lighten-1 mb-3">
+                          {{ group.description }}
+                        </p>
                         <div class="flex flex-wrap gap-4 justify-start pt-2">
                           <div
                             v-for="suggestion in group.buttonMappingSuggestions"
@@ -252,12 +263,23 @@
                         <div class="flex items-center gap-2">
                           <v-icon size="16" color="green-lighten-2">mdi-folder-outline</v-icon>
                           <span class="text-sm font-semibold text-grey-lighten-1">{{ group.name }}</span>
+                          <v-tooltip v-if="group.description" location="top" max-width="320">
+                            <template #activator="{ props: tooltipProps }">
+                              <v-icon v-bind="tooltipProps" size="14" color="grey-lighten-1" class="cursor-help">
+                                mdi-information-outline
+                              </v-icon>
+                            </template>
+                            <span class="text-xs">{{ group.description }}</span>
+                          </v-tooltip>
                           <v-chip size="x-small" variant="outlined" color="green">
                             {{ group.buttonMappingSuggestions.length }}
                           </v-chip>
                         </div>
                       </v-expansion-panel-title>
                       <v-expansion-panel-text>
+                        <p v-if="group.description" class="text-sm text-grey-lighten-1 mb-3">
+                          {{ group.description }}
+                        </p>
                         <div class="flex flex-wrap gap-4 justify-start pt-2">
                           <div
                             v-for="suggestion in group.buttonMappingSuggestions"
@@ -351,12 +373,23 @@
                         <div class="flex items-center gap-2">
                           <v-icon size="16" color="orange-lighten-2">mdi-folder-outline</v-icon>
                           <span class="text-sm font-semibold text-grey-lighten-1">{{ group.name }}</span>
+                          <v-tooltip v-if="group.description" location="top" max-width="320">
+                            <template #activator="{ props: tooltipProps }">
+                              <v-icon v-bind="tooltipProps" size="14" color="grey-lighten-1" class="cursor-help">
+                                mdi-information-outline
+                              </v-icon>
+                            </template>
+                            <span class="text-xs">{{ group.description }}</span>
+                          </v-tooltip>
                           <v-chip size="x-small" variant="outlined" color="orange">
                             {{ group.buttonMappingSuggestions.length }}
                           </v-chip>
                         </div>
                       </v-expansion-panel-title>
                       <v-expansion-panel-text>
+                        <p v-if="group.description" class="text-sm text-grey-lighten-1 mb-3">
+                          {{ group.description }}
+                        </p>
                         <div class="flex flex-wrap gap-4 justify-start pt-2">
                           <div
                             v-for="suggestion in group.buttonMappingSuggestions"
@@ -871,10 +904,10 @@ interface FilteredExtensionGroups {
  * @returns {boolean} True when the group is compatible with the selected profile
  */
 const suggestionGroupMatchesSelectedProfile = (group: JoystickMapSuggestionGroup): boolean => {
-  if (!group.target?.length) return true
+  if (!group.targetVehicleTypes?.length) return true
   if (!selectedProfileHash.value) return false
 
-  return group.target.includes(selectedProfileHash.value)
+  return group.targetVehicleTypes.includes(selectedProfileHash.value)
 }
 
 /**

src/libs/blueos/schemas.ts

@@ -100,6 +100,7 @@ const JoystickButtonMappingSuggestionSchema = z
 const JoystickMapSuggestionGroupSchema = z.object({
   id: z.string(),
   name: z.string(),
+  description: z.string().optional(),
   buttonMappingSuggestions: z.array(JoystickButtonMappingSuggestionSchema),
   targetVehicleTypes: z.array(z.string()).optional(),
   version: z.string().optional(),

src/types/joystick.ts

@@ -577,6 +577,10 @@ export interface JoystickMapSuggestionGroup {
    * Display name for the suggestion group
    */
   name: string
+  /**
+   * Optional description for the suggestion group
+   */
+  description?: string
   /**
    * List of button mapping suggestions in this group
    */