Add client linting to GitHub Actions workflow

Enhance CI/CD pipeline by introducing a new job to run ESLint on the client application. This ensures code quality and consistency for the frontend codebase.

client/components/forms/FileInput.vue

@@ -285,7 +285,7 @@ export default {
                 src: this.getFileSrc(file)
               })
               this.loading = false
-            }).catch((error) => {
+            }).catch(() => {
               this.loading = false
             })
           } else {
@@ -297,7 +297,7 @@ export default {
             this.loading = false
           }
         })
-        .catch((error) => {
+        .catch(() => {
           this.clearAll()
           this.loading = false
         })

client/components/forms/MentionInput.vue

@@ -56,7 +56,7 @@
 </template>
   
   <script setup>
-  import { ref, onMounted, watch, computed } from 'vue'
+  import { ref, onMounted, watch } from 'vue'
   import { inputProps, useFormInput } from './useFormInput.js'
   import InputWrapper from './components/InputWrapper.vue'
   import MentionDropdown from './components/MentionDropdown.vue'
@@ -66,7 +66,7 @@
     disableMention: { type: Boolean, default: false },
   })
   const emit = defineEmits(['update:modelValue'])
-  const { compVal, inputStyle, hasValidation, hasError, inputWrapperProps } = useFormInput(props, { emit })
+  const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
   const editableDiv = ref(null)
   const savedRange = ref(null)
   const subscriptionModalStore = useSubscriptionModalStore()

client/components/forms/SignatureInput.vue

@@ -169,7 +169,7 @@ export default {
           }
           this.loading = false
         })
-        .catch((error) => {
+        .catch(() => {
           this.loading = false
           this.file = null
         })

client/components/forms/TextBlock.vue

@@ -1,8 +1,8 @@
 <template>
-    <div
-      v-html="processedContent"
-    />
-  </template>
+  <div
+    v-html="processedContent"
+  />
+</template>
   
   <script setup>
   const props = defineProps({

client/components/forms/components/CheckboxIcon.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   isChecked: {
     type: Boolean,
     required: true

client/components/forms/components/MentionDropdown.vue

@@ -1,71 +1,71 @@
 <template>
-    <UPopover
-      ref="popover"
-      v-model:open="open"
-      class="h-0"
-      @close="cancel"
-    >
-      <span class="hidden" />
-      <template #panel>
-        <div class="p-2 max-h-[300px] flex flex-col">
-          <div class="flex items-center border-b -mx-2 px-2">
-            <div class="font-semibold w-1/2 mb-2 flex-grow">
-              Insert Mention
-            </div>
-            <input
-              v-model="fallbackValue"
-              class="p-1 mb-2 text-sm w-1/2 border rounded-md hover:bg-gray-50"
-              placeholder="Fallback value"
-            >
+  <UPopover
+    ref="popover"
+    v-model:open="open"
+    class="h-0"
+    @close="cancel"
+  >
+    <span class="hidden" />
+    <template #panel>
+      <div class="p-2 max-h-[300px] flex flex-col">
+        <div class="flex items-center border-b -mx-2 px-2">
+          <div class="font-semibold w-1/2 mb-2 flex-grow">
+            Insert Mention
           </div>
-          <div class="overflow-scroll pt-2">
-            <div class="w-full max-w-xs mb-2">
-              <div class="text-sm text-gray-500 mb-1">
-                Select a field
-              </div>
-              <div class="space-y-1">
-                <div
-                  v-for="field in filteredMentions"
-                  :key="field.id"
-                  class="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100"
-                  :class="{ 'bg-blue-50 border border-blue-100 inset-0': selectedField?.id === field.id, 'border border-transparent': selectedField?.id !== field.id }"
-                  @click="selectField(field)"
-                  @dblclick="selectField(field, true)"
-                >
-                  <BlockTypeIcon
-                    :type="field.type"
-                    class="mr-2"
-                  />
-                  <p class="text-sm text-gray-700 truncate">
-                    {{ field.name }}
-                  </p>
-                </div>
+          <input
+            v-model="fallbackValue"
+            class="p-1 mb-2 text-sm w-1/2 border rounded-md hover:bg-gray-50"
+            placeholder="Fallback value"
+          >
+        </div>
+        <div class="overflow-scroll pt-2">
+          <div class="w-full max-w-xs mb-2">
+            <div class="text-sm text-gray-500 mb-1">
+              Select a field
+            </div>
+            <div class="space-y-1">
+              <div
+                v-for="field in filteredMentions"
+                :key="field.id"
+                class="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100"
+                :class="{ 'bg-blue-50 border border-blue-100 inset-0': selectedField?.id === field.id, 'border border-transparent': selectedField?.id !== field.id }"
+                @click="selectField(field)"
+                @dblclick="selectField(field, true)"
+              >
+                <BlockTypeIcon
+                  :type="field.type"
+                  class="mr-2"
+                />
+                <p class="text-sm text-gray-700 truncate">
+                  {{ field.name }}
+                </p>
               </div>
             </div>
           </div>
-            
-          <div class="flex border-t pt-2 -mx-2 px-2 justify-end space-x-2">
-            <UButton
-              size="sm"
-              color="primary"
-              class="px-6"
-              :disabled="!selectedField"
-              @click="insertMention" 
-            >
-              Insert
-            </UButton>
-            <UButton
-              size="sm"
-              color="gray"
-              @click="cancel"
-            >
-              Cancel
-            </UButton>
-          </div>
         </div>
-      </template>
-    </UPopover>
-  </template>
+            
+        <div class="flex border-t pt-2 -mx-2 px-2 justify-end space-x-2">
+          <UButton
+            size="sm"
+            color="primary"
+            class="px-6"
+            :disabled="!selectedField"
+            @click="insertMention" 
+          >
+            Insert
+          </UButton>
+          <UButton
+            size="sm"
+            color="gray"
+            @click="cancel"
+          >
+            Cancel
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
       
   <script setup>
   import { ref, toRefs } from 'vue'

client/components/forms/components/QuillyEditor.vue

@@ -1,9 +1,9 @@
 <template>
-    <div
-      ref="container"
-      class="quilly-editor"
-    />
-  </template>
+  <div
+    ref="container"
+    class="quilly-editor"
+  />
+</template>
   
   <script setup>
   import Quill from 'quill'

client/components/forms/components/RadioButtonIcon.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   isChecked: {
     type: Boolean,
     required: true