refactor: improved input validations

components/app/Header.vue

@@ -1,10 +1,7 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
-    <div
-      class="font-bold space-x-4 flex-shrink-0 text-sm inline-flex items-center"
-    >
+    <div class="font-bold flex-shrink-0 inline-flex items-center">
       <AppLogo />
-      <span>Hoppscotch</span>
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="flex mx-2 mt-1" />

components/app/Shortcuts.vue

@@ -41,7 +41,7 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 py-4 px-6"
         >
-          <h5 class="font-bold text-secondaryDark text-sm">
+          <h5 class="font-bold text-secondaryDark">
             {{ map.section }}
           </h5>
           <div
@@ -82,6 +82,15 @@ export default {
       mappings: [
         {
           section: "General",
+          shortcuts: [
+            {
+              keys: ["?"],
+              label: this.$t("shortcut.show_all"),
+            },
+          ],
+        },
+        {
+          section: "Request",
           shortcuts: [
             {
               keys: [getPlatformSpecialKey(), "G"],
@@ -99,11 +108,6 @@ export default {
               keys: [getPlatformSpecialKey(), "I"],
               label: this.$t("shortcut.reset_request"),
             },
-          ],
-        },
-        {
-          section: "Request",
-          shortcuts: [
             {
               keys: [getPlatformAlternateKey(), "↑"],
               label: this.$t("shortcut.next_method"),

components/collections/Add.vue

@@ -40,6 +40,10 @@ export default {
   },
   methods: {
     addNewCollection() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },

components/collections/AddFolder.vue

@@ -43,6 +43,10 @@ export default {
   },
   methods: {
     addFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("add-folder", {
         name: this.name,
         folder: this.folder,

components/collections/Edit.vue

@@ -41,6 +41,10 @@ export default {
   },
   methods: {
     saveCollection() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },

components/collections/EditFolder.vue

@@ -40,6 +40,10 @@ export default {
   },
   methods: {
     editFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },

components/collections/EditRequest.vue

@@ -43,6 +43,10 @@ export default {
   },
   methods: {
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.requestUpdateData)
       this.hideModal()
     },

components/collections/SaveRequest.vue

@@ -107,14 +107,14 @@ export default defineComponent({
       this.picked = picked
     },
     saveRequestAs() {
-      if (this.picked == null) {
-        this.$toast.error(this.$t("collection.select"), {
+      if (!this.requestName) {
+        this.$toast.error(this.$t("empty_req_name"), {
           icon: "error",
         })
         return
       }
-      if (this.$data.requestData.name.length === 0) {
-        this.$toast.error(this.$t("empty_req_name"), {
+      if (this.picked == null) {
+        this.$toast.error(this.$t("collection.select"), {
           icon: "error",
         })
         return

components/collections/index.vue

@@ -21,8 +21,8 @@
             py-2
             pr-2
             pl-9
-            focus:outline-none
             truncate
+            focus:outline-none
           "
         />
       </div>
@@ -312,10 +312,6 @@ export default {
     },
     // Intented to be called by the CollectionAdd modal submit event
     addNewRootCollection(name) {
-      if (!name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
-        return
-      }
       if (this.collectionsType.type === "my-collections") {
         addRESTCollection({
           name,

components/environments/Edit.vue

@@ -6,17 +6,19 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <input
-          id="selectLabelEnvEdit"
-          v-model="name"
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          @keyup.enter="saveEnvironment"
-        />
-        <label for="selectLabelEnvEdit">
-          {{ $t("label") }}
-        </label>
+        <div class="flex relative">
+          <input
+            id="selectLabelEnvEdit"
+            v-model="name"
+            class="input floating-input"
+            placeholder=" "
+            type="text"
+            @keyup.enter="saveEnvironment"
+          />
+          <label for="selectLabelEnvEdit">
+            {{ $t("label") }}
+          </label>
+        </div>
         <div class="flex flex-1 justify-between items-center">
           <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("env_variable_list") }}
@@ -26,7 +28,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
               :icon="clearIcon"
-              @click.native="clearContent($event)"
+              @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"

components/http/ImportCurl.vue

@@ -9,11 +9,14 @@
         <textarea
           id="import-curl"
           v-model="curl"
-          class="textarea"
+          class="font-mono textarea floating-input"
           autofocus
           rows="8"
-          :placeholder="$t('enter_curl')"
+          placeholder=" "
         ></textarea>
+        <label for="import-curl">
+          {{ $t("enter_curl") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/smart/Modal.vue

@@ -34,7 +34,6 @@
             class="
               bg-primary
               rounded-lg
-              m-4
               shadow-lg
               text-left
               w-full
@@ -45,12 +44,22 @@
               align-bottom
               overflow-hidden
               sm:max-w-md sm:align-middle
+              md:m-4
             "
           >
             <div class="flex pl-2 items-center justify-between">
               <slot name="header"></slot>
             </div>
-            <div class="flex flex-col my-4">
+            <div
+              class="
+                flex flex-col
+                max-h-md
+                my-4
+                py-2
+                overflow-y-auto
+                hide-scrollbar
+              "
+            >
               <slot name="body"></slot>
             </div>
             <div