Some cleanup in tags and tag filter mode dropdowns

frontend/src/components/search/ActiveFilterBar.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="ActiveFilterBar" v-if="activeFilters.entries.length > 0">
     <div class="flex flex-row flex-wrap">
-      <div class="Filter" v-for="filter in activeFilters.entries" :key="filter.id">
+      <div
+        class="Filter"
+        v-for="filter in activeFilters.entries"
+        :key="filter.id"
+        :id="'af_' + createIdFrom(filter.id)"
+      >
         <Dropdown
-          size="small"
           v-model="filter.mode"
           @change="updateActiveFilterMode(filter, $event.value)"
           :options="searchModes"
           option-label="name"
           option-value="mode"
+          :append-to="'#af_' + createIdFrom(filter.id)"
         />
         <div class="Content">
           <component :is="resolveComponent(filter.type)" :value="filter.content" />
@@ -25,6 +30,7 @@ import { ActiveFilterMode, ActiveFilterType, useActiveFiltersStore } from '@/sto
 import Button from 'primevue/button'
 import ActiveFilterTagEntry from '@/components/search/ActiveFilterTagEntry.vue'
 import Dropdown from 'primevue/dropdown'
+import { createIdFrom } from '@/plugins/id'
 
 const searchModes = [
   { name: 'prefer', mode: ActiveFilterMode.SHOULD },
@@ -52,14 +58,16 @@ function resolveComponent(type: ActiveFilterType): any {
 
 <style lang="scss">
 .Filter {
-  zoom: 0.8;
   display: flex;
   flex-wrap: nowrap;
 
+  zoom: 0.8;
+
   margin-right: 0.4rem;
   margin-bottom: 0.4rem;
 
   .p-dropdown {
+    border-width: 2px;
     border-right: 0;
     border-color: black;
     border-radius: var(--border-radius) 0 0 var(--border-radius);

frontend/src/components/structure/SearchTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ResultTag inline-block" @click="print">
+  <div class="ResultTag inline-block">
     <div class="flex align-items-center gap-0">
       <span class="p-1 px-2" v-for="(part, idx) in tag.parts" :key="idx">
         {{ tag.trans.parts[idx] ?? part }}
@@ -22,7 +22,6 @@
 
 <script setup lang="ts">
 import type { Tag } from '@/stores/tags'
-import { toRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { n } = useI18n()
@@ -39,8 +38,6 @@ const props = withDefaults(
     disableTranslation: false
   }
 )
-
-const print = () => console.log(toRaw(props.tag))
 </script>
 
 <style lang="scss">

frontend/src/locales/en.yaml

@@ -277,6 +277,7 @@ index:
     AbletonScene: '@:common.label.ableton-scene.s'
     AbletonSampleReference: '@:common.label.ableton-sample-reference.s'
     AbletonAlsFile: 'Ableton Live Set (.ALS) file'
+    AbletonMidiArpeggiatorDevice: 'MIDI Arpeggiator device'
 
 tag:
   example: Category

frontend/src/plugins/id.ts

@@ -0,0 +1,3 @@
+export function createIdFrom(v: string): string {
+  return v.replace(/\W/g, '_')
+}

frontend/src/stores/search.ts

@@ -38,7 +38,7 @@ export const useSearchStore = defineStore('search', () => {
   // Install a watcher that will retrigger when a tag is added to the active filters
   watch(activeFilters.value, async () => {
     // Also ensure we reset the lastSortKey to begin a fresh result
-    lastSortKey.value = [];
+    lastSortKey.value = []
     await search(currentQueryInstance.value ?? createQueryInstanceWithDefaults(), true)
   })
 
@@ -48,7 +48,6 @@ export const useSearchStore = defineStore('search', () => {
   ): Promise<SearchResult | null> => {
     // Catch a reset by the user
     if (currentQueryString.value.trim() === '' && activeFilters.value.length == 0) {
-      console.log('RESETTING');
       reset()
       return null
     }