frontend: Add eslint.config.js file to report warnings

Add `eslint.config.js` file to report warnings instead of errors
for the potential issues that ESLint reports for the `frontend/`.

The reported issues could be fixed opportunistically when making
other changes to the codebase, in order to test the various
components at the same time.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import pluginJs from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default [
+  pluginJs.configs.recommended,
+
+  ...pluginVue.configs['flat/essential'],
+
+  eslintConfigPrettier,
+
+  {
+    files: ['**/*.{js,mjs,cjs,vue}'],
+
+    rules: {
+      'no-unused-vars': 'warn',
+      'no-extra-boolean-cast': 'warn',
+    },
+  },
+
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'vue/require-v-for-key': 'warn',
+      'vue/multi-word-component-names': 'warn',
+      'vue/no-side-effects-in-computed-properties': 'warn',
+    },
+  },
+];

frontend/package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "format": "prettier --write src",
-    "check:format": "prettier --check src"
+    "check:format": "prettier --check src",
+    "check:lint": "eslint src"
   },
   "dependencies": {
     "@apollo/client": "^3.7.3",

frontend/src/App.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
 This software is released under the terms of the GNU GENERAL PUBLIC LICENSE.
 See LICENSE.txt for full details.
 Copyright 2023 Telemarq Ltd

frontend/src/components/DeviceChooser.vue

@@ -1,19 +1,17 @@
-<!-- 
+<!--
 This software is released under the terms of the GNU GENERAL PUBLIC LICENSE.
 See LICENSE.txt for full details.
 Copyright 2023 Telemarq Ltd
 -->
 
 <script setup>
-import { watch, ref, nextTick } from 'vue';
-import { useQuery, useMutation } from '@vue/apollo-composable';
+import { watch, nextTick } from 'vue';
 import {
   devices,
   activeDevices,
   deleteDevice,
   setDeviceSelected,
 } from '../store.js';
-import gql from 'graphql-tag';
 
 import DeviceDecryptWidget from './DeviceDecryptWidget.vue';
 

frontend/src/components/SearchResults.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
 This software is released under the terms of the GNU GENERAL PUBLIC LICENSE.
 See LICENSE.txt for full details.
 Copyright 2023 Telemarq Ltd
@@ -10,20 +10,18 @@ Copyright 2023 Telemarq Ltd
       <div v-for="device in activeDevices" class="header">
         <span class="deviceName">{{ device }}</span>
       </div>
-      <div
-        v-if="searchResult"
-        v-for="eventRow in eventsRowGenerator()"
-        class="row"
-      >
-        <template v-for="event in eventRow">
-          <div v-if="event !== null" class="event" :class="event.__typename">
-            <SearchResultMessageEvent
-              v-if="event.__typename == 'MessageEvent'"
-              :event="event"
-            />
-          </div>
-          <div v-else class="event"></div>
-        </template>
+      <div v-if="searchResult">
+        <div v-for="eventRow in eventsRowGenerator()" class="row">
+          <template v-for="event in eventRow">
+            <div v-if="event !== null" class="event" :class="event.__typename">
+              <SearchResultMessageEvent
+                v-if="event.__typename == 'MessageEvent'"
+                :event="event"
+              />
+            </div>
+            <div v-else class="event"></div>
+          </template>
+        </div>
       </div>
     </div>
     <div v-if="activeDevices.length === 0" class="center text-box">

frontend/src/components/ThreePaneView.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
 This software is released under the terms of the GNU GENERAL PUBLIC LICENSE.
 See LICENSE.txt for full details.
 Copyright 2023 Telemarq Ltd
@@ -9,15 +9,12 @@ import { ref } from 'vue';
 import DeviceChooser from './DeviceChooser.vue';
 import Search from './Search.vue';
 import Subsetter from './Subsetter.vue';
-import ProviderChooser from './ProviderChooser.vue';
 import SearchViewChooser from './SearchViewChooser.vue';
 import SearchResults from './SearchResults.vue';
 import SearchResultsMedia from './SearchResultsMedia.vue';
 
 import { searchView } from '../store.js';
 
-const showRefinements = ref(false);
-
 const popoverMessage = ref('This is the popover message');
 
 function showPopover(message) {