feat: add i18n support and implement Grafana plugin

Adds internationalization support in filters and origins pages by 
importing the useI18n function. Expands ESLint configuration to 
include new rules and plugins, ensuring improved code quality. 
Introduces Grafana monitoring plugin to enhance performance 
tracking capabilities in the application.

components/pages/filters/filter-list.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card flat variant="outlined" rounded="xl" class="mx-3 my-3">
     <v-card-title>
-      <span v-text="$t(title, model.length)" />
+      <span v-text="t(titleKey, model.length)" />
     </v-card-title>
     <v-list>
       <v-list-item v-for="item in model" :key="item" :title="item">
@@ -9,11 +9,9 @@
           <v-list-item-action @click="toggleIgnore(type, item)">
             <v-tooltip top>
               <template #activator="{ props }">
-                <v-icon v-bind="props">
-                  mdi-delete-outline
-                </v-icon>
+                <v-icon icon='mdi-delete-outline' v-bind="props" />
               </template>
-              <span v-text="$t('filters.remove')" />
+              <span v-text="t('filters.remove')" />
             </v-tooltip>
           </v-list-item-action>
         </template>
@@ -28,7 +26,7 @@ defineProps({
     type: Array,
     required: true,
   },
-  title: {
+  titleKey: {
     type: String,
     required: true,
   },
@@ -41,4 +39,6 @@ defineProps({
     required: true,
   },
 })
+
+const { t } = useI18n()
 </script>

components/pages/filters/filter-page.vue

@@ -9,7 +9,7 @@
                 <v-col xs="12" sm="12" md="4" lg="4">
                   <list
                     :model="bands || []"
-                    title="filters.band"
+                    title-key="filters.band"
                     type="band"
                     :toggle-ignore="toggleIgnore"
                   />
@@ -19,25 +19,25 @@
                     <v-col cols="12">
                       <list
                         :model="states || []"
-                        title="filters.state"
+                        title-key="filters.state"
                         type="state"
                         :toggle-ignore="toggleIgnore"
                       />
                       <list
                         :model="municipalities || []"
-                        title="filters.municipality"
+                        title-key="filters.municipality"
                         type="municipality"
                         :toggle-ignore="toggleIgnore"
                       />
                       <list
                         :model="cities || []"
-                        title="filters.city"
+                        title-key="filters.city"
                         type="city"
                         :toggle-ignore="toggleIgnore"
                       />
                       <list
                         :model="danceHalls || []"
-                        title="filters.hall"
+                        title-key="filters.hall"
                         type="danceHall"
                         :toggle-ignore="toggleIgnore"
                       />
@@ -61,10 +61,10 @@
 </template>
 
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
 import { useAuth0 } from '@auth0/auth0-vue'
+import { computed, ref } from 'vue'
+
 import { useI18n } from '#i18n'
-import List from './filter-list.vue'
 import {
   useFetchFiltersQuery,
   useToggleIgnoreBandMutation,
@@ -75,6 +75,8 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
+import List from './filter-list.vue'
+
 const state = useState()
 const { t } = useI18n()
 state.setTitle(t('app.links.filters'))