chore: uniform ui in rest and graphql collections

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -205,7 +205,7 @@
                 :src="`/images/states/${colorMode.value}/pack.svg`"
                 loading="lazy"
                 class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-                :alt="`${t('empty.collection')}`"
+                :alt="`${t('empty.collections')}`"
               />
               <span class="pb-4 text-center">
                 {{ t("empty.collections") }}
@@ -213,7 +213,6 @@
               <ButtonSecondary
                 :label="t('add.new')"
                 filled
-                class="mb-4"
                 outline
                 @click="emit('display-modal-add')"
               />
@@ -235,7 +234,6 @@
             <ButtonSecondary
               :label="t('add.new')"
               filled
-              class="mb-4"
               outline
               @click="
                 node.data.type === 'collections' &&

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -27,9 +27,8 @@
         </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
-          :show-coll-actions="false"
           :picked="picked"
-          :saving-mode="true"
+          :save-request="true"
           @select="onSelect"
         />
         <Collections

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -201,7 +201,7 @@
                 :src="`/images/states/${colorMode.value}/pack.svg`"
                 loading="lazy"
                 class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-                :alt="`${t('empty.collection')}`"
+                :alt="`${t('empty.collections')}`"
               />
               <span class="pb-4 text-center">
                 {{ t("empty.collections") }}
@@ -244,12 +244,11 @@
               filled
               outline
               :title="t('team.no_access')"
-              :label="t('action.new')"
+              :label="t('add.new')"
             />
             <ButtonSecondary
               v-else
-              :icon="IconPlus"
+              :label="t('add.new')"
-              :label="t('action.new')"
               filled
               outline
               @click="

packages/hoppscotch-common/src/components/collections/TeamSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-1">
     <SmartIntersection
-      class="flex flex-1 flex-col"
+      class="flex flex-col flex-1"
       @intersecting="onTeamSelectIntersect"
     >
       <tippy
@@ -37,7 +37,7 @@
           >
             <div
               v-if="isTeamListLoading && myTeams.length === 0"
-              class="flex flex-col flex-1 items-center justify-center p-2"
+              class="flex flex-col items-center justify-center flex-1 p-2"
             >
               <SmartSpinner class="my-2" />
               <span class="text-secondaryLight">{{ t("state.loading") }}</span>
@@ -75,15 +75,15 @@
             </div>
             <div
               v-else
-              class="flex flex-col items-center justify-center text-secondaryLight p-2"
+              class="flex flex-col items-center justify-center p-2 text-secondaryLight"
             >
               <img
                 :src="`/images/states/${colorMode.value}/add_group.svg`"
                 loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-14 h-14 mb-4"
+                class="inline-flex flex-col object-contain object-center mb-4 w-14 h-14"
                 :alt="`${t('empty.teams')}`"
               />
-              <span class="text-center pb-4">
+              <span class="pb-4 text-center">
                 {{ t("empty.teams") }}
               </span>
               <ButtonSecondary

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()
   }
 

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

@@ -132,7 +132,7 @@
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="`subFolder-${String(subFolderIndex)}`"
           :picked="picked"
-          :saving-mode="savingMode"
+          :save-request="saveRequest"
           :folder="subFolder"
           :folder-index="subFolderIndex"
           :folder-path="`${folderPath}/${String(subFolderIndex)}`"
@@ -149,7 +149,7 @@
           v-for="(request, index) in folder.requests"
           :key="`request-${String(index)}`"
           :picked="picked"
-          :saving-mode="savingMode"
+          :save-request="saveRequest"
           :request="request"
           :collection-index="collectionIndex"
           :folder-index="folderIndex"
@@ -212,7 +212,7 @@ const colorMode = useColorMode()
 const props = defineProps({
   picked: { type: Object, default: null },
   // Whether the request is in a selectable mode (activates 'select' event)
-  savingMode: { type: Boolean, default: false },
+  saveRequest: { type: Boolean, default: false },
   folder: { type: Object, default: () => ({}) },
   folderIndex: { type: Number, default: null },
   collectionIndex: { type: Number, default: null },
@@ -263,7 +263,7 @@ const pick = () => {
 }
 
 const toggleShowChildren = () => {
-  if (props.savingMode) {
+  if (props.saveRequest) {
     pick()
   }
 

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

@@ -29,7 +29,7 @@
       </span>
       <div class="flex">
         <ButtonSecondary
-          v-if="!savingMode"
+          v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconRotateCCW"
           :title="t('action.restore')"
@@ -148,7 +148,7 @@ const props = defineProps({
   // Whether the object is selected (show the tick mark)
   picked: { type: Object, default: null },
   // Whether the request is being saved (activate 'select' event)
-  savingMode: { type: Boolean, default: false },
+  saveRequest: { type: Boolean, default: false },
   request: { type: Object as PropType<HoppGQLRequest>, default: () => ({}) },
   folderPath: { type: String, default: null },
   requestIndex: { type: Number, default: null },
@@ -178,7 +178,7 @@ const pick = () => {
 }
 
 const selectRequest = () => {
-  if (props.savingMode) {
+  if (props.saveRequest) {
     pick()
   } else {
     setGQLSession({

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

@@ -1,18 +1,21 @@
 <template>
-  <div :class="{ 'rounded border border-divider': savingMode }">
+  <div :class="{ 'rounded border border-divider': saveRequest }">
     <div
-      class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y divide-dividerLight border-dividerLight"
+      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
-      :class="{ 'bg-primary': !savingMode }"
+      :style="
+        saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
+      "
     >
       <input
-        v-if="showCollActions"
         v-model="filterText"
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="flex px-4 py-2 bg-transparent"
+        class="py-2 pl-4 pr-2 bg-transparent"
       />
-      <div class="flex justify-between flex-1">
+      <div
+        class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
+      >
         <ButtonSecondary
           :icon="IconPlus"
           :label="t('action.new')"
@@ -28,7 +31,7 @@
             :icon="IconHelpCircle"
           />
           <ButtonSecondary
-            v-if="showCollActions"
+            v-if="!saveRequest"
             v-tippy="{ theme: 'tooltip' }"
             :title="t('modal.import_export')"
             :icon="IconArchive"
@@ -37,7 +40,7 @@
         </div>
       </div>
     </div>
-    <div class="flex-col">
+    <div class="flex flex-col">
       <CollectionsGraphqlCollection
         v-for="(collection, index) in filteredCollections"
         :key="`collection-${index}`"
@@ -46,7 +49,7 @@
         :collection-index="index"
         :collection="collection"
         :is-filtered="filterText.length > 0"
-        :saving-mode="savingMode"
+        :save-request="saveRequest"
         @edit-collection="editCollection(collection, index)"
         @add-request="addRequest($event)"
         @add-folder="addFolder($event)"
@@ -154,10 +157,8 @@ import { useColorMode } from "@composables/theming"
 export default defineComponent({
   props: {
     // Whether to activate the ability to pick items (activates 'select' events)
-    savingMode: { type: Boolean, default: false },
+    saveRequest: { type: Boolean, default: false },
     picked: { type: Object, default: null },
-    // Whether to show the 'New' and 'Import/Export' actions
-    showCollActions: { type: Boolean, default: true },
   },
   emits: ["select", "use-collection"],
   setup() {

packages/hoppscotch-common/src/components/smart/Tree.vue

@@ -29,7 +29,7 @@
     </div>
     <div
       v-else-if="rootNodes.status === 'loading'"
-      class="flex flex-1 flex-col items-center justify-center p-4"
+      class="flex flex-col items-center justify-center flex-1 p-4"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>

packages/hoppscotch-common/src/components/smart/TreeBranch.vue

@@ -44,7 +44,7 @@
 
     <div
       v-if="childNodes.status === 'loading'"
-      class="flex flex-1 flex-col items-center justify-center p-4"
+      class="flex flex-col items-center justify-center flex-1 p-4"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>