feat: add filter highlighting

Author: HerringtonDarkholme

website/src/catalog/RuleItem.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { type RuleMeta, languages } from './data'
+import { type RuleMeta, type Filter, languages } from './data'
 import { type PropType, computed } from 'vue'
 
 const { meta } = defineProps({
   meta: {
     type: Object as PropType<RuleMeta>,
     required: true,
+  },
+  filter: {
+    type: Object as PropType<Filter>,
+    required: true,
   }
 })
 const displayRuleCount = computed(() => {
@@ -23,7 +27,12 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
       <a :href="meta.link" class="rule-name" target="_blank">{{ meta.name }}</a>
       <div class="rule-badges">
         <Badge type="info">
-          <a :href="`/catalog/${meta.language}/`" class="override-badge-text-color" target="_blank">
+          <a
+            :href="`/catalog/${meta.language}/`"
+            class="override-badge-text-color"
+            :class="filter.selectedLanguages.length && 'highlight-filter'"
+            target="_blank"
+          >
             {{ languages[meta.language] }}
           </a>
         </Badge>
@@ -69,10 +78,10 @@ a:hover {
   text-decoration: underline;
 }
 .override-badge-text-color {
-  color: var(--vp-c-text-1);
+  color: var(--vp-c-text-2);
 }
 .override-badge-text-color:hover {
-  color: var(--vp-c-text-1);
+  color: var(--vp-c-text-2);
 }
 
 .link {
@@ -117,7 +126,7 @@ a:hover {
 }
 
 .used {
-  filter: saturate(0);
+  color: var(--vp-c-text-2);
   user-select: none;
   height: 24px;
   line-height: 24px;
@@ -127,4 +136,10 @@ a:hover {
   /* Offset emoji visual spacing */
   margin-right: -2px;
 }
+.highlight-filter {
+  color: var(--vp-c-brand-1);
+}
+.highlight-filter:hover {
+  color: var(--vp-c-brand-1);
+}
 </style>

website/src/catalog/RuleList.vue

@@ -17,7 +17,7 @@ const ruleMetaData = computed(() => getRuleMetaData(props.filter))
   <h3>Rule List</h3>
   <br/>
   <TransitionGroup class="rule-list" tag="ul">
-    <RuleItem v-for="meta in ruleMetaData" :key="meta.language + meta.id" :meta="meta"/>
+    <RuleItem v-for="meta in ruleMetaData" :key="meta.language + meta.id" :meta="meta" :filter="filter"/>
   </TransitionGroup>
 </template>