chore: uniform ui in rest and graphql collections

packages/hoppscotch-common/src/components/collections/graphql/Collection.vue

@@ -143,7 +143,7 @@
           v-for="(folder, index) in collection.folders"
           :key="`folder-${String(index)}`"
           :picked="picked"
-          :saving-mode="savingMode"
+          :save-request="saveRequest"
           :folder="folder"
           :folder-index="index"
           :folder-path="`${collectionIndex}/${String(index)}`"
@@ -160,7 +160,7 @@
           v-for="(request, index) in collection.requests"
           :key="`request-${String(index)}`"
           :picked="picked"
-          :saving-mode="savingMode"
+          :save-request="saveRequest"
           :request="request"
           :collection-index="collectionIndex"
           :folder-index="-1"
@@ -183,9 +183,19 @@
             class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="`${t('empty.collection')}`"
           />
-          <span class="text-center">
+          <span class="pb-4 text-center">
             {{ t("empty.collection") }}
           </span>
+          <ButtonSecondary
+            :label="t('add.new')"
+            filled
+            outline
+            @click="
+              emit('add-folder', {
+                path: `${collectionIndex}`,
+              })
+            "
+          />
         </div>
       </div>
     </div>
@@ -219,7 +229,7 @@ import {
 const props = defineProps({
   picked: { type: Object, default: null },
   // Whether the viewing context is related to picking (activates 'select' events)
-  savingMode: { type: Boolean, default: false },
+  saveRequest: { type: Boolean, default: false },
   collectionIndex: { type: Number, default: null },
   collection: { type: Object, default: () => ({}) },
   isFiltered: Boolean,
@@ -275,7 +285,7 @@ const pick = () => {
 }
 
 const toggleShowChildren = () => {
-  if (props.savingMode) {
+  if (props.saveRequest) {
     pick()
   }