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/events/event-card.vue

@@ -6,11 +6,10 @@
           v-if="hasUser"
           class="ml-1 mr-1 text-medium-emphasis"
           size="small"
-          title="Dölj"
+          :title="t('events.hide')"
+          icon='mdi-eye-off'
           @click="toggleIgnore('band', event.band.name)"
-        >
-          mdi-eye-off
-        </v-icon>
+        />
         {{ event.band.name }}
       </h3>
     </v-card-title>
@@ -21,13 +20,13 @@
           xs="12"
           sm="6"
         >
-          <strong class="mr-1" v-text="$t('events.date')" />{{
+          <strong class="mr-1" v-text="t('events.date')" />{{
             event.date
           }}
           ({{ weekday }} {{ daysUntil }})
         </v-col>
         <v-col v-if="event.time" cols="12" xs="12" sm="6">
-          <strong class="mr-1" v-text="$t('events.time')" />{{
+          <strong class="mr-1" v-text="t('events.time')" />{{
             event.time
           }}
         </v-col>
@@ -38,16 +37,15 @@
           xs="12"
           sm="6"
         >
-          <strong class="mr-1" v-text="$t('events.hall')" />
+          <strong class="mr-1" v-text="t('events.hall')" />
           <v-icon
             v-if="hasUser"
             class="ml-1 mr-1 text-medium-emphasis"
             size="small"
-            :title="$t('events.hide')"
+            :title="t('events.hide')"
+            icon='mdi-eye-off'
             @click="toggleIgnore('danceHall', event.danceHall.name)"
-          >
-            mdi-eye-off
-          </v-icon>
+          />
           {{ event.danceHall.name }}
         </v-col>
         <v-col
@@ -55,16 +53,15 @@
           xs="12"
           sm="6"
         >
-          <strong class="mr-1" v-text="$t('events.city')" />
+          <strong class="mr-1" v-text="t('events.city')" />
           <v-icon
             v-if="hasUser"
             class="ml-1 mr-1 text-medium-emphasis"
             size="small"
-            :title="$t('events.hide')"
+            :title="t('events.hide')"
+            icon='mdi-eye-off'
             @click="toggleIgnore('city', event.danceHall.city)"
-          >
-            mdi-eye-off
-          </v-icon>
+          />
           {{ event.danceHall.city }}
         </v-col>
         <v-col
@@ -72,18 +69,17 @@
           xs="12"
           sm="6"
         >
-          <strong class="mr-1" v-text="$t('events.municipality')" />
+          <strong class="mr-1" v-text="t('events.municipality')" />
           <v-icon
             v-if="hasUser"
             class="ml-1 mr-1 text-medium-emphasis"
             size="small"
-            :title="$t('events.hide')"
+            :title="t('events.hide')"
+            icon='mdi-eye-off'
             @click="
               toggleIgnore('municipality', event.danceHall.municipality)
             "
-          >
-            mdi-eye-off
-          </v-icon>
+          />
           {{ event.danceHall.municipality }}
         </v-col>
         <v-col
@@ -91,16 +87,15 @@
           xs="12"
           sm="6"
         >
-          <strong class="mr-1" v-text="$t('events.state')" />
+          <strong class="mr-1" v-text="t('events.state')" />
           <v-icon
             v-if="hasUser"
             class="ml-1 mr-1 text-medium-emphasis"
             size="small"
-            :title="$t('events.hide')"
+            :title="t('events.hide')"
+            icon='mdi-eye-off'
             @click="toggleIgnore('state', event.danceHall.state)"
-          >
-            mdi-eye-off
-          </v-icon>
+          />
           {{ event.danceHall.state }}
         </v-col>
       </v-row>
@@ -112,12 +107,12 @@
 <script setup lang='ts'>
 
 import { format, formatDistanceToNow, parseISO } from 'date-fns'
-
 import { enGB, sv } from 'date-fns/locale'
 import { computed, type PropType } from 'vue'
+
 import { useI18n } from '#i18n'
-import type { Event } from '~/graphql/generated/operations'
 import DistanceDisplay from '~/components/pages/events/event-distance.vue'
+import type { Event } from '~/graphql/generated/operations'
 
 const props = defineProps({
   event: {
@@ -133,7 +128,7 @@ const props = defineProps({
     required: true,
   },
 })
-const { locale: currentLocale } = useI18n()
+const { t, locale: currentLocale } = useI18n()
 const locale = computed(() => (currentLocale.value ?? 'sv') === 'en' ? enGB : sv)
 const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':'))
 const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value }))

components/pages/events/event-distance.vue

@@ -1,19 +1,13 @@
 <template>
   <v-row dense>
     <v-col cols="12" sm="12" md="6">
-      <v-icon class="me-1">
-        mdi-home
-      </v-icon>
+      <v-icon class="me-1" icon='mdi-home' />
       <span><strong>{{ distance.origin }}</strong></span>
     </v-col>
     <v-col cols="12" sm="12" md="6">
-      <v-icon class="me-1">
-        mdi-car
-      </v-icon>
-      <span>{{ numericDistance }} km</span>
-      <v-icon class="ms-2 me-1">
-        mdi-clock-outline
-      </v-icon>
+      <v-icon class="me-1" icon='mdi-car' />
+      <span>{{ numericDistance }}</span>
+      <v-icon class="ms-2 me-1" icon='mdi-clock-outline' />
       <span>{{ distance.duration }}</span>
     </v-col>
   </v-row>
@@ -21,6 +15,7 @@
 
 <script setup lang='ts'>
 import { computed, type PropType } from 'vue'
+
 import type { DanceHallDistance } from '~/graphql/generated/operations'
 
 const props = defineProps({
@@ -30,8 +25,8 @@ const props = defineProps({
   },
 })
 const numericDistance = computed(() =>
-  Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
+  `${Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
-  }))
+  })} km`)
 </script>

components/pages/events/event-list.vue

@@ -14,9 +14,11 @@
 
 <script setup lang='ts'>
 import type { PropType } from 'vue'
-import EventCard from './event-card.vue'
+
 import type { Event } from '~/graphql/generated/operations'
 
+import EventCard from './event-card.vue'
+
 defineProps({
   hasUser: {
     type: Boolean,

components/pages/events/event-page.vue

@@ -3,7 +3,7 @@
     <v-container :key="range" fluid grid-list-md class="app-fade-in">
       <v-row v-if="!isAuthenticated" wrap>
         <v-col xs="12">
-          <p><b v-text="$t('events.login')" /></p>
+          <p><b v-text="t('events.login')" /></p>
         </v-col>
       </v-row>
       <v-row wrap>
@@ -12,34 +12,32 @@
             v-model="origin"
             variant="underlined"
             hide-details
-            :label="$t('origins.origin')"
-            :placeholder="$t('origins.geolocation')"
+            :label="t('origins.origin')"
+            :placeholder="t('origins.geolocation')"
           >
             <template #append>
               <v-tooltip top>
                 <template #activator="{ props }">
                   <v-icon
+                    icon='mdi-crosshairs-gps'
                     v-bind="props"
                     @click="fetchAddressFn()"
-                  >
-                    mdi-crosshairs-gps
-                  </v-icon>
+                  />
                 </template>
-                <span v-text="$t('origins.fetchAddress')" />
+                <span v-text="t('origins.fetchAddress')" />
               </v-tooltip>
             </template>
             <template #prepend>
               <v-tooltip v-if="isAuthenticated" top>
                 <template #activator="{ props }">
                   <v-icon
+                    icon='mdi-bookmark-plus-outline'
                     :disabled="!origin"
                     v-bind="props"
                     @click="saveOriginFn(origin)"
-                  >
-                    mdi-bookmark-plus-outline
-                  </v-icon>
+                  />
                 </template>
-                <span v-text="$t('origins.save')" />
+                <span v-text="t('origins.save')" />
               </v-tooltip>
             </template>
           </v-text-field>
@@ -53,7 +51,7 @@
             mandatory
           >
             <v-btn v-for="r in ranges" :key="r.value" variant="outlined" :value="r.value">
-              <span v-text="$t(`events.range.${r.value}`)" />
+              <span v-text="t(`events.range.${r.value}`)" />
             </v-btn>
           </v-btn-toggle>
           <v-select
@@ -73,13 +71,13 @@
             v-model="state.search"
             variant="underlined"
             append-outer-icon="mdi-magnify"
-            :label="$t('events.filter')"
-            :placeholder="$t('events.filter')"
+            :label="t('events.filter')"
+            :placeholder="t('events.filter')"
             hide-details
           />
         </v-col>
         <v-col cols="12" sm="4">
-          <v-checkbox v-model="state.includeHidden" :label="$t('events.includeHidden')" hide-details />
+          <v-checkbox v-model="state.includeHidden" :label="t('events.includeHidden')" hide-details />
         </v-col>
       </v-row>
       <event-list
@@ -99,11 +97,11 @@
 </template>
 
 <script setup lang='ts'>
-import { computed, ref, watch } from 'vue'
 import { useAuth0 } from '@auth0/auth0-vue'
+import { computed, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
+
 import { useI18n } from '#i18n'
-import EventList from './event-list.vue'
 import {
   type FindEventsQueryVariables,
   useFetchAddressLazyQuery,
@@ -117,6 +115,8 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
+import EventList from './event-list.vue'
+
 const state = useState()
 const { smAndUp } = useDisplay()
 const range = computed(() => state.range)