Add Selected Filters in myHistory

package.json

@@ -36,6 +36,7 @@
     "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
     "@empathyco/x-types": "^10.0.0-alpha.75",
     "@empathyco/x-utils": "^1.0.0-alpha.23",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",

src/components/my-history/custom-my-history.vue

@@ -16,12 +16,28 @@
             @click="closeModal"
             data-test="my-history-query"
             :suggestion="suggestion"
-            suggestionClass="x-suggestion"
+            suggestionClass="x-suggestion x-w-[320px]"
           >
             <HistoryIcon class="max-desktop:x-icon-lg" />
 
             <div class="x-flex x-flex-col x-gap-2">
-              <p>{{ suggestion.query }}</p>
+              <p class="hover:x-underline">{{ suggestion.query }}</p>
+              <div
+                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"
+                class="x-text1-sm x-flex x-text-lead-50"
+              >
+                <p class="x-line-clamp-1">
+                  <span
+                    v-for="filter in suggestion.selectedFilters"
+                    :key="filter.id"
+                    class="x-pr-8"
+                  >
+                    {{ label(filter) }}
+                  </span>
+                </p>
+                <p class="x-pl-8">({{ suggestion.selectedFilters.length }})</p>
+              </div>
+
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
                 <template v-if="suggestion.totalResults !== undefined">
@@ -62,8 +78,13 @@
       HistoryQuery
     },
     setup() {
+      const label = (filter: Record<string, string>): string => {
+        return filter.label ?? filter.id;
+      };
+
       return {
-        animation: StaggeredFadeAndSlide
+        animation: StaggeredFadeAndSlide,
+        label
       };
     }
   });

src/tailwind/plugin-options.js

@@ -17,6 +17,9 @@ module.exports = {
         paddingTop: theme('spacing.24'),
         paddingBottom: theme('spacing.24')
       }
+    },
+    '.history-query.suggestion-group:hover': {
+      textDecoration: 'none'
     }
   })
 };

tailwind.config.js

@@ -10,5 +10,5 @@ module.exports = {
   ],
   prefix: 'x-',
   important: true,
-  plugins: [xTailwindPlugin(options)]
+  plugins: [xTailwindPlugin(options), require('@tailwindcss/line-clamp')]
 };