rework filters ux

src/components/filters/FilterName.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="bg-gray-900 mb-2 leading-none rounded">
-    <button class="py-1 px-2" @click="toggleAccuracy">{{ label }}</button>
+  <div class="filter-name">
+    <button class="px-2 rounded border"
+      :class="{ 'border-gray-500': showAsActive, 'border-gray-900': !showAsActive }"
+      @click="toggleAccuracy">{{ label }}</button>
+    <button v-if="filters.corrupted" class="px-2" @click="filters.corrupted.value = !filters.corrupted.value">
+      <span v-if="filters.corrupted.value" class="text-red-500">Corrupted</span>
+      <span v-else class="text-gray-600">Not Corrupted</span>
+    </button>
   </div>
 </template>
 
@@ -32,6 +38,17 @@ export default {
       }
 
       return '??? Report if you see this text'
+    },
+    showAsActive () {
+      if (
+        this.item.rarity === ItemRarity.Unique ||
+        !this.item.computed.category ||
+        [ItemCategory.Map, ItemCategory.Prophecy, ItemCategory.ItemisedMonster].includes(this.item.computed.category)
+      ) {
+        return false
+      }
+
+      return !this.label.startsWith('Type:')
     }
   },
   methods: {
@@ -57,3 +74,12 @@ export default {
   }
 }
 </script>
+
+<style lang="postcss">
+.filter-name {
+  @apply bg-gray-900 mb-2 rounded;
+  line-height: 1.25rem;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/components/filters/FiltersBlock.vue

@@ -8,7 +8,9 @@
       <div v-if="filters.gemLevel" class="trade-tag">Level: {{ filters.gemLevel.min }}</div>
       <div v-if="filters.quality" class="trade-tag">Quality: {{ filters.quality.min }}%</div>
       <template v-if="filters.influences">
-        <div v-for="influence of filters.influences" :key="influence.value" class="trade-tag flex items-center">
+        <button v-for="influence of filters.influences" :key="influence.value" class="trade-tag flex items-center"
+          :class="{ disabled: influence.disabled }"
+          @click="influence.disabled = !influence.disabled">
           <template v-if="influence.value === 'Shaper'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Shaper.png">
             <span class="ml-2">Shaper</span>
@@ -33,13 +35,9 @@
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Warlord.png">
             <span class="ml-2">Warlord</span>
           </template>
-        </div>
+        </button>
       </template>
-      <button v-if="filters.corrupted" class="trade-tag" @click="filters.corrupted.value = !filters.corrupted.value">
-        <span v-if="filters.corrupted.value" class="text-red-500">Corrupted</span>
-        <span v-else>Not Corrupted</span>
-      </button>
-      <button v-if="stats.length" class="trade-tag" @click="toggleStatsBlock">
+      <button v-if="stats.length" class="trade-tag" :class="{ disabled: totalSelectedMods === 0 }" @click="toggleStatsBlock">
         <span v-if="totalSelectedMods === 0">Stats ignored</span>
         <span v-else>{{ totalSelectedMods }} Stats</span>
       </button>
@@ -102,10 +100,12 @@ export default {
 
 <style lang="postcss">
 .trade-tag {
-  @apply bg-gray-900 py-1 px-2 m-1 rounded leading-none;
+  @apply bg-gray-900 px-2 m-1 rounded;
+  @apply border border-gray-500;
+  line-height: 1.25rem;
 
   &.disabled {
-    @apply line-through text-gray-700;
+    @apply border-gray-900;
   }
 }
 </style>