Separate query parameters and variables vue files

packages/hoppscotch-app/components/http/Variables.vue

@@ -5,6 +5,19 @@
     >
       <label class="font-semibold text-secondaryLight"> My Variables </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/#"
+          blank
+          :title="t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear_all')"
+          svg="trash-2"
+          @click.native="clearContent()"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
@@ -227,4 +240,15 @@ const deleteVar = (index: number) => {
     O.getOrElseW(() => throwError("Working Params Deletion Out of Bounds"))
   )
 }
+
+const clearContent = () => {
+  // set params list to the initial state
+  workingVars.value = [
+    {
+      id: idTicker.value++,
+      key: "",
+      value: "",
+    },
+  ]
+}
 </script>