refactor: lint + minor ui fixes

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -20,16 +20,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -39,7 +30,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               path: `${collectionIndex}`,
@@ -100,16 +91,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -150,27 +132,12 @@
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="
-            flex
-            text-secondaryLight
-            flex-col
-            items-center
-            justify-center
-            p-4
-          "
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -20,16 +20,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -41,7 +32,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -96,16 +87,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -149,27 +131,12 @@
             folder.requests &&
             folder.requests.length === 0
           "
-          class="
-            flex
-            text-secondaryLight
-            flex-col
-            items-center
-            justify-center
-            p-4
-          "
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -9,15 +9,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
-          flex
-          items-center
-          justify-center
-          w-16
-          px-2
-          truncate
-          cursor-pointer
-        "
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <SmartIcon
@@ -27,16 +19,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -47,7 +30,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -4,17 +4,7 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="
-        flex
-        divide-dividerLight
-        border-dividerLight
-        sticky
-        top-0
-        z-10
-        flex-col
-        border-b
-        divide-y
-      "
+      class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -72,7 +62,7 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
@@ -91,9 +81,9 @@
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
-      <i class="pb-2 opacity-75 material-icons">manage_search</i>
+      <i class="material-icons pb-2 opacity-75">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>