chore: merge hoppscotch/staging into self-hosted/main

packages/hoppscotch-common/src/components/app/Header.vue

@@ -17,27 +17,13 @@
         />
         <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+      <div class="inline-flex items-center space-x-2">
-        <AppNavigation v-if="mdAndLarger" />
-        <div
-          class="bg-primaryDark max-w-128 text-secondaryLight justify-between cursor-pointer rounded border border-dividerDark hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary focus:outline-none transition flex flex-1 items-center px-2 py-1.25"
-          tabindex="0"
-          @click="invokeAction('modals.search.toggle')"
-        >
-          <span class="inline-flex">
-            <icon-lucide-search class="mr-2 svg-icons" />
-            {{ t("app.search") }}
-          </span>
-          <kbd class="shortcut-key">/</kbd>
-        </div>
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${
+          :title="`${t('app.search')} <kbd>/</kbd>`"
-            mdAndLarger ? t('support.title') : t('app.options')
+          :icon="IconSearch"
-          } <kbd>?</kbd>`"
-          :icon="IconHelpCircle"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click="invokeAction('modals.support.toggle')"
+          @click="invokeAction('modals.search.toggle')"
         />
         <HoppButtonSecondary
           v-if="showInstallButton"
@@ -47,8 +33,15 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="installPWA()"
         />
-      </div>
+        <HoppButtonSecondary
-      <div class="inline-flex items-center justify-end flex-1 space-x-2">
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="`${
+            mdAndLarger ? t('support.title') : t('app.options')
+          } <kbd>?</kbd>`"
+          :icon="IconLifeBuoy"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          @click="invokeAction('modals.support.toggle')"
+        />
         <div
           v-if="currentUser === null"
           class="inline-flex items-center space-x-2"
@@ -242,7 +235,8 @@ import IconSettings from "~icons/lucide/settings"
 import IconDownload from "~icons/lucide/download"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUserPlus from "~icons/lucide/user-plus"
-import IconHelpCircle from "~icons/lucide/help-circle"
+import IconLifeBuoy from "~icons/lucide/life-buoy"
+import IconSearch from "~icons/lucide/search"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"

packages/hoppscotch-common/src/components/app/Navigation.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="flex items-center justify-between">
-    <HoppButtonSecondary
-      v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-      :title="`${t(
-        'action.go_back'
-      )} <kbd>${getSpecialKey()}</kbd><kbd>←</kbd>`"
-      :icon="IconArrowLeft"
-      class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-      @click="router.go(-1)"
-    />
-    <HoppButtonSecondary
-      v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-      :title="`${t(
-        'action.go_forward'
-      )} <kbd>${getSpecialKey()}</kbd><kbd>→</kbd>`"
-      :icon="IconArrowRight"
-      class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-      @click="router.go(1)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useRouter } from "vue-router"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import IconArrowLeft from "~icons/lucide/arrow-left"
-import IconArrowRight from "~icons/lucide/arrow-right"
-
-const t = useI18n()
-const router = useRouter()
-</script>

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

@@ -165,6 +165,20 @@
         </div>
       </div>
     </div>
+    <div
+      v-if="isLastItem"
+      class="w-full transition"
+      :class="[
+        {
+          'bg-accentDark': isLastItemReorderable,
+          'h-1 ': isLastItem,
+        },
+      ]"
+      @drop="updateLastItemOrder"
+      @dragover.prevent="orderingLastItem = true"
+      @dragleave="orderingLastItem = false"
+      @dragend="resetDragState"
+    ></div>
   </div>
 </template>
 
@@ -249,6 +263,11 @@ const props = defineProps({
     default: () => [],
     required: false,
   },
+  isLastItem: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -262,6 +281,7 @@ const emit = defineEmits<{
   (event: "drag-event", payload: DataTransfer): void
   (event: "dragging", payload: boolean): void
   (event: "update-collection-order", payload: DataTransfer): void
+  (event: "update-last-collection-order", payload: DataTransfer): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -274,6 +294,7 @@ const options = ref<TippyComponent | null>(null)
 
 const dragging = ref(false)
 const ordering = ref(false)
+const orderingLastItem = ref(false)
 const dropItemID = ref("")
 
 const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
@@ -333,6 +354,14 @@ const isReorderable = computed(() => {
     isSameParent.value
   )
 })
+const isLastItemReorderable = computed(() => {
+  return (
+    orderingLastItem.value &&
+    notSameDestination.value &&
+    !isRequestDragging.value &&
+    isSameParent.value
+  )
+})
 
 const dragStart = ({ dataTransfer }: DragEvent) => {
   if (dataTransfer) {
@@ -350,17 +379,35 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
 // Trigger the re-ordering event when a collection is dragged over another collection's top section
 const handleDragOver = (e: DragEvent) => {
   dragging.value = true
-  if (e.offsetY < 10 && notSameDestination.value) {
+  if (
+    e.offsetY < 10 &&
+    notSameDestination.value &&
+    !isRequestDragging.value &&
+    isSameParent.value
+  ) {
     ordering.value = true
     dragging.value = false
+    orderingLastItem.value = false
+  } else if (
+    e.offsetY > 18 &&
+    notSameDestination.value &&
+    !isRequestDragging.value &&
+    isSameParent.value
+  ) {
+    orderingLastItem.value = true
+    dragging.value = false
+    ordering.value = false
   } else {
     ordering.value = false
+    orderingLastItem.value = false
   }
 }
 
 const handelDrop = (e: DragEvent) => {
   if (ordering.value) {
     orderUpdateCollectionEvent(e)
+  } else if (orderingLastItem.value) {
+    updateLastItemOrder(e)
   } else {
     dropEvent(e)
   }
@@ -382,6 +429,14 @@ const orderUpdateCollectionEvent = (e: DragEvent) => {
   }
 }
 
+const updateLastItemOrder = (e: DragEvent) => {
+  if (e.dataTransfer) {
+    e.stopPropagation()
+    emit("update-last-collection-order", e.dataTransfer)
+    resetDragState()
+  }
+}
+
 const notSameDestination = computed(() => {
   return dropItemID.value !== props.id
 })
@@ -397,5 +452,6 @@ const isCollLoading = computed(() => {
 const resetDragState = () => {
   dragging.value = false
   ordering.value = false
+  orderingLastItem.value = false
 }
 </script>

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

@@ -43,6 +43,7 @@
             :data="node.data.data.data"
             :collections-type="collectionsType.type"
             :is-open="isOpen"
+            :is-last-item="node.data.isLastItem"
             :is-selected="
               isSelected({
                 collectionIndex: parseInt(node.id),
@@ -77,7 +78,18 @@
             @remove-collection="emit('remove-collection', node.id)"
             @drop-event="dropEvent($event, node.id)"
             @drag-event="dragEvent($event, node.id)"
-            @update-collection-order="updateCollectionOrder($event, node.id)"
+            @update-collection-order="
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: node.id,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
+            "
+            @update-last-collection-order="
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: null,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
+            "
             @dragging="
               (isDraging) => highlightChildren(isDraging ? node.id : null)
             "
@@ -99,6 +111,7 @@
             :data="node.data.data.data"
             :collections-type="collectionsType.type"
             :is-open="isOpen"
+            :is-last-item="node.data.isLastItem"
             :is-selected="
               isSelected({
                 folderPath: node.id,
@@ -133,7 +146,18 @@
             @remove-collection="emit('remove-folder', node.id)"
             @drop-event="dropEvent($event, node.id)"
             @drag-event="dragEvent($event, node.id)"
-            @update-collection-order="updateCollectionOrder($event, node.id)"
+            @update-collection-order="
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: node.id,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
+            "
+            @update-last-collection-order="
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: null,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
+            "
             @dragging="
               (isDraging) => highlightChildren(isDraging ? node.id : null)
             "
@@ -155,6 +179,7 @@
             :parent-i-d="node.data.data.parentIndex"
             :collections-type="collectionsType.type"
             :save-request="saveRequest"
+            :is-last-item="node.data.isLastItem"
             :is-active="
               isActiveRequest(
                 node.data.data.parentIndex,
@@ -209,6 +234,12 @@
                 requestIndex: node.id,
               })
             "
+            @update-last-request-order="
+              updateRequestOrder($event, {
+                folderPath: node.data.data.parentIndex,
+                requestIndex: null,
+              })
+            "
           />
         </template>
         <template #emptyNode="{ node }">
@@ -305,6 +336,7 @@ import { currentActiveTab } from "~/helpers/rest/tab"
 
 export type Collection = {
   type: "collections"
+  isLastItem: boolean
   data: {
     parentIndex: null
     data: HoppCollection<HoppRESTRequest>
@@ -313,6 +345,7 @@ export type Collection = {
 
 type Folder = {
   type: "folders"
+  isLastItem: boolean
   data: {
     parentIndex: string
     data: HoppCollection<HoppRESTRequest>
@@ -321,6 +354,7 @@ type Folder = {
 
 type Requests = {
   type: "requests"
+  isLastItem: boolean
   data: {
     parentIndex: string
     data: HoppRESTRequest
@@ -450,7 +484,7 @@ const emit = defineEmits<{
     event: "update-request-order",
     payload: {
       dragedRequestIndex: string
-      destinationRequestIndex: string
+      destinationRequestIndex: string | null
       destinationCollectionIndex: string
     }
   ): void
@@ -458,7 +492,10 @@ const emit = defineEmits<{
     event: "update-collection-order",
     payload: {
       dragedCollectionIndex: string
-      destinationCollectionIndex: string
+      destinationCollection: {
+        destinationCollectionIndex: string | null
+        destinationCollectionParentIndex: string | null
+      }
     }
   ): void
   (event: "select", payload: Picked | null): void
@@ -589,7 +626,7 @@ const updateRequestOrder = (
   {
     folderPath,
     requestIndex,
-  }: { folderPath: string | null; requestIndex: string }
+  }: { folderPath: string | null; requestIndex: string | null }
 ) => {
   if (!folderPath) return
   const dragedRequestIndex = dataTransfer.getData("requestIndex")
@@ -605,13 +642,16 @@ const updateRequestOrder = (
 
 const updateCollectionOrder = (
   dataTransfer: DataTransfer,
-  destinationCollectionIndex: string
+  destinationCollection: {
+    destinationCollectionIndex: string | null
+    destinationCollectionParentIndex: string | null
+  }
 ) => {
   const dragedCollectionIndex = dataTransfer.getData("collectionIndex")
 
   emit("update-collection-order", {
     dragedCollectionIndex,
-    destinationCollectionIndex,
+    destinationCollection,
   })
 }
 
@@ -641,6 +681,7 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
           id: index.toString(),
           data: {
             type: "collections",
+            isLastItem: index === this.data.value.length - 1,
             data: {
               parentIndex: null,
               data: item,
@@ -662,23 +703,25 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
 
       if (item) {
         const data = [
-          ...item.folders.map((item, index) => ({
+          ...item.folders.map((folder, index) => ({
             id: `${id}/${index}`,
             data: {
+              isLastItem: index === item.folders.length - 1,
               type: "folders",
               data: {
                 parentIndex: id,
-                data: item,
+                data: folder,
               },
             },
           })),
-          ...item.requests.map((item, index) => ({
+          ...item.requests.map((requests, index) => ({
             id: `${id}/${index}`,
             data: {
+              isLastItem: index === item.requests.length - 1,
               type: "requests",
               data: {
                 parentIndex: id,
-                data: item,
+                data: requests,
               },
             },
           })),

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

@@ -1,13 +1,13 @@
 <template>
   <div class="flex flex-col">
     <div
-      class="h-1"
+      class="h-1 w-full transition"
       :class="[
         {
           'bg-accentDark': isReorderable,
         },
       ]"
-      @drop="dropEvent"
+      @drop="updateRequestOrder"
       @dragover.prevent="ordering = true"
       @dragleave="resetDragState"
       @dragend="resetDragState"
@@ -15,7 +15,7 @@
     <div
       class="flex items-stretch group"
       :draggable="!hasNoTeamAccess"
-      @drop="dropEvent"
+      @drop="handelDrop"
       @dragstart="dragStart"
       @dragover="handleDragOver($event)"
       @dragleave="resetDragState"
@@ -138,6 +138,19 @@
         </span>
       </div>
     </div>
+    <div
+      class="w-full transition"
+      :class="[
+        {
+          'bg-accentDark': isLastItemReorderable,
+          'h-1 ': isLastItem,
+        },
+      ]"
+      @drop="handelDrop"
+      @dragover.prevent="orderingLastItem = true"
+      @dragleave="resetDragState"
+      @dragend="resetDragState"
+    ></div>
   </div>
 </template>
 
@@ -214,6 +227,11 @@ const props = defineProps({
     default: () => [],
     required: false,
   },
+  isLastItem: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -223,6 +241,7 @@ const emit = defineEmits<{
   (event: "select-request"): void
   (event: "drag-request", payload: DataTransfer): void
   (event: "update-request-order", payload: DataTransfer): void
+  (event: "update-last-request-order", payload: DataTransfer): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -233,6 +252,7 @@ const duplicate = ref<HTMLButtonElement | null>(null)
 
 const dragging = ref(false)
 const ordering = ref(false)
+const orderingLastItem = ref(false)
 
 const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
   type: "collection",
@@ -269,6 +289,10 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
   }
 }
 
+const isSameRequest = computed(() => {
+  return currentReorderingStatus.value.id === props.requestID
+})
+
 const isCollectionDragging = computed(() => {
   return currentReorderingStatus.value.type === "collection"
 })
@@ -278,7 +302,18 @@ const isSameParent = computed(() => {
 })
 
 const isReorderable = computed(() => {
-  return ordering.value && !isCollectionDragging.value && isSameParent.value
+  return (
+    ordering.value &&
+    !isCollectionDragging.value &&
+    isSameParent.value &&
+    !isSameRequest.value
+  )
+})
+
+const isLastItemReorderable = computed(() => {
+  return (
+    orderingLastItem.value && isSameParent.value && !isCollectionDragging.value
+  )
 })
 
 // Trigger the re-ordering event when a request is dragged over another request's top section
@@ -287,12 +322,28 @@ const handleDragOver = (e: DragEvent) => {
   if (e.offsetY < 10) {
     ordering.value = true
     dragging.value = false
+    orderingLastItem.value = false
+  } else if (e.offsetY > 18) {
+    orderingLastItem.value = true
+    dragging.value = false
+    ordering.value = false
   } else {
     ordering.value = false
+    orderingLastItem.value = false
   }
 }
 
-const dropEvent = (e: DragEvent) => {
+const handelDrop = (e: DragEvent) => {
+  if (ordering.value) {
+    updateRequestOrder(e)
+  } else if (orderingLastItem.value) {
+    updateLastItemOrder(e)
+  } else {
+    updateRequestOrder(e)
+  }
+}
+
+const updateRequestOrder = (e: DragEvent) => {
   if (e.dataTransfer) {
     e.stopPropagation()
     resetDragState()
@@ -300,6 +351,14 @@ const dropEvent = (e: DragEvent) => {
   }
 }
 
+const updateLastItemOrder = (e: DragEvent) => {
+  if (e.dataTransfer) {
+    e.stopPropagation()
+    resetDragState()
+    emit("update-last-request-order", e.dataTransfer)
+  }
+}
+
 const isRequestLoading = computed(() => {
   if (props.requestMoveLoading.length > 0 && props.requestID) {
     return props.requestMoveLoading.includes(props.requestID)
@@ -311,5 +370,6 @@ const isRequestLoading = computed(() => {
 const resetDragState = () => {
   dragging.value = false
   ordering.value = false
+  orderingLastItem.value = false
 }
 </script>

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

@@ -60,6 +60,7 @@
             :export-loading="exportLoading"
             :has-no-team-access="hasNoTeamAccess"
             :collection-move-loading="collectionMoveLoading"
+            :is-last-item="node.data.isLastItem"
             :is-selected="
               isSelected({
                 collectionID: node.id,
@@ -95,7 +96,16 @@
             @drop-event="dropEvent($event, node.id)"
             @drag-event="dragEvent($event, node.id)"
             @update-collection-order="
-              updateCollectionOrder($event, node.data.data.data.id)
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: node.data.data.data.id,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
+            "
+            @update-last-collection-order="
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: null,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
             "
             @dragging="
               (isDraging) =>
@@ -122,6 +132,7 @@
             :export-loading="exportLoading"
             :has-no-team-access="hasNoTeamAccess"
             :collection-move-loading="collectionMoveLoading"
+            :is-last-item="node.data.isLastItem"
             :is-selected="
               isSelected({
                 folderID: node.data.data.data.id,
@@ -159,7 +170,16 @@
             @drop-event="dropEvent($event, node.data.data.data.id)"
             @drag-event="dragEvent($event, node.data.data.data.id)"
             @update-collection-order="
-              updateCollectionOrder($event, node.data.data.data.id)
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: node.data.data.data.id,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
+            "
+            @update-last-collection-order="
+              updateCollectionOrder($event, {
+                destinationCollectionIndex: null,
+                destinationCollectionParentIndex: node.data.data.parentIndex,
+              })
             "
             @dragging="
               (isDraging) =>
@@ -186,6 +206,7 @@
             :is-active="isActiveRequest(node.data.data.data.id)"
             :has-no-team-access="hasNoTeamAccess"
             :request-move-loading="requestMoveLoading"
+            :is-last-item="node.data.isLastItem"
             :is-selected="
               isSelected({
                 requestID: node.data.data.data.id,
@@ -231,6 +252,12 @@
                 requestIndex: node.data.data.data.id,
               })
             "
+            @update-last-request-order="
+              updateRequestOrder($event, {
+                folderPath: node.data.data.parentIndex,
+                requestIndex: null,
+              })
+            "
           />
         </template>
         <template #emptyNode="{ node }">
@@ -461,7 +488,7 @@ const emit = defineEmits<{
     event: "update-request-order",
     payload: {
       dragedRequestIndex: string
-      destinationRequestIndex: string
+      destinationRequestIndex: string | null
       destinationCollectionIndex: string
     }
   ): void
@@ -469,7 +496,10 @@ const emit = defineEmits<{
     event: "update-collection-order",
     payload: {
       dragedCollectionIndex: string
-      destinationCollectionIndex: string
+      destinationCollection: {
+        destinationCollectionIndex: string | null
+        destinationCollectionParentIndex: string | null
+      }
     }
   ): void
   (event: "select", payload: Picked | null): void
@@ -597,7 +627,7 @@ const updateRequestOrder = (
   {
     folderPath,
     requestIndex,
-  }: { folderPath: string | null; requestIndex: string }
+  }: { folderPath: string | null; requestIndex: string | null }
 ) => {
   if (!folderPath) return
   const dragedRequestIndex = dataTransfer.getData("requestIndex")
@@ -613,17 +643,21 @@ const updateRequestOrder = (
 
 const updateCollectionOrder = (
   dataTransfer: DataTransfer,
-  destinationCollectionIndex: string
+  destinationCollection: {
+    destinationCollectionIndex: string | null
+    destinationCollectionParentIndex: string | null
+  }
 ) => {
   const dragedCollectionIndex = dataTransfer.getData("collectionIndex")
 
   emit("update-collection-order", {
     dragedCollectionIndex,
-    destinationCollectionIndex,
+    destinationCollection,
   })
 }
 
 type TeamCollections = {
+  isLastItem: boolean
   type: "collections"
   data: {
     parentIndex: null
@@ -632,6 +666,7 @@ type TeamCollections = {
 }
 
 type TeamFolder = {
+  isLastItem: boolean
   type: "folders"
   data: {
     parentIndex: string
@@ -640,6 +675,7 @@ type TeamFolder = {
 }
 
 type TeamRequests = {
+  isLastItem: boolean
   type: "requests"
   data: {
     parentIndex: string
@@ -679,9 +715,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
             status: "loading",
           }
         } else {
-          const data = this.data.value.map((item) => ({
+          const data = this.data.value.map((item, index) => ({
             id: item.id,
             data: {
+              isLastItem: index === this.data.value.length - 1,
               type: "collections",
               data: {
                 parentIndex: null,
@@ -709,9 +746,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
           if (items) {
             const data = [
               ...(items.children
-                ? items.children.map((item) => ({
+                ? items.children.map((item, index) => ({
                     id: `${id}/${item.id}`,
                     data: {
+                      isLastItem: index === items.children.length - 1,
                       type: "folders",
                       data: {
                         parentIndex: parsedID,
@@ -721,9 +759,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
                   }))
                 : []),
               ...(items.requests
-                ? items.requests.map((item) => ({
+                ? items.requests.map((item, index) => ({
                     id: `${id}/${item.id}`,
                     data: {
+                      isLastItem: index === items.requests.length - 1,
                       type: "requests",
                       data: {
                         parentIndex: parsedID,

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

@@ -2,7 +2,8 @@
   <div
     :class="{
       'rounded border border-divider': saveRequest,
-      'bg-primaryDark': draggingToRoot,
+      'bg-primaryDark':
+        draggingToRoot && currentReorderingStatus.type !== 'request',
     }"
     class="flex-1"
     @drop.prevent="dropToRoot"
@@ -85,7 +86,9 @@
     />
     <div
       class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
-      :class="{ '!flex': draggingToRoot }"
+      :class="{
+        '!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
+      }"
     >
       <component :is="IconListEnd" class="svg-icons !w-8 !h-8" />
     </div>
@@ -232,6 +235,7 @@ import {
   resolveSaveContextOnCollectionReorder,
   updateSaveContextForAffectedRequests,
 } from "~/helpers/collection/collection"
+import { currentReorderingStatus$ } from "~/newstore/reordering"
 
 const t = useI18n()
 const toast = useToast()
@@ -396,6 +400,12 @@ watch(
   }
 )
 
+const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
+  type: "collection",
+  id: "",
+  parentID: "",
+})
+
 const hasTeamWriteAccess = computed(() => {
   if (!collectionsType.value.selectedTeam) return false
 
@@ -1525,13 +1535,34 @@ const dropToRoot = ({ dataTransfer }: DragEvent) => {
 
 /**
  * Used to check if the request/collection is being moved to the same parent since reorder is only allowed within the same parent
- * @param draggedReq - path index of the dragged request
+ * @param draggedItem - path index of the dragged request
- * @param destinationReq - path index of the destination request
+ * @param destinationItem - path index of the destination request
+ * @param destinationCollectionIndex -  index of the destination collection
  * @returns boolean - true if the request is being moved to the same parent
  */
-const isSameSameParent = (draggedItem: string, destinationItem: string) => {
+const isSameSameParent = (
-  const draggedItemIndex = pathToIndex(draggedItem)
+  draggedItemPath: string,
-  const destinationItemIndex = pathToIndex(destinationItem)
+  destinationItemPath: string | null,
+  destinationCollectionIndex: string | null
+) => {
+  const draggedItemIndex = pathToIndex(draggedItemPath)
+
+  // if the destinationItemPath and destinationCollectionIndex is null, it means the request is being moved to the root
+  if (destinationItemPath === null && destinationCollectionIndex === null) {
+    return draggedItemIndex.length === 1
+  } else if (
+    destinationItemPath === null &&
+    destinationCollectionIndex !== null &&
+    draggedItemIndex.length === 1
+  ) {
+    return draggedItemIndex[0] === destinationCollectionIndex
+  } else if (destinationItemPath === null && draggedItemIndex.length !== 1) {
+    const dragedItemParent = draggedItemIndex.slice(0, -1)
+
+    return dragedItemParent[0] === destinationCollectionIndex
+  } else {
+    if (destinationItemPath === null) return false
+    const destinationItemIndex = pathToIndex(destinationItemPath)
 
     // length of 1 means the request is in the root
     if (draggedItemIndex.length === 1 && destinationItemIndex.length === 1) {
@@ -1547,6 +1578,7 @@ const isSameSameParent = (draggedItem: string, destinationItem: string) => {
     } else {
       return false
     }
+  }
 }
 
 /**
@@ -1556,7 +1588,7 @@ const isSameSameParent = (draggedItem: string, destinationItem: string) => {
  */
 const updateRequestOrder = (payload: {
   dragedRequestIndex: string
-  destinationRequestIndex: string
+  destinationRequestIndex: string | null
   destinationCollectionIndex: string
 }) => {
   const {
@@ -1565,29 +1597,28 @@ const updateRequestOrder = (payload: {
     destinationCollectionIndex,
   } = payload
 
-  if (
+  if (!dragedRequestIndex || !destinationCollectionIndex) return
-    !dragedRequestIndex ||
-    !destinationRequestIndex ||
-    !destinationCollectionIndex
-  )
-    return
 
   if (dragedRequestIndex === destinationRequestIndex) return
 
   if (collectionsType.value.type === "my-collections") {
-    if (!isSameSameParent(dragedRequestIndex, destinationRequestIndex)) {
+    if (
+      !isSameSameParent(
+        dragedRequestIndex,
+        destinationRequestIndex,
+        destinationCollectionIndex
+      )
+    ) {
       toast.error(`${t("collection.different_parent")}`)
     } else {
       updateRESTRequestOrder(
         pathToLastIndex(dragedRequestIndex),
-        pathToLastIndex(destinationRequestIndex),
+        destinationRequestIndex
+          ? pathToLastIndex(destinationRequestIndex)
+          : null,
         destinationCollectionIndex
       )
-      resolveSaveContextOnRequestReorder({
+
-        lastIndex: pathToLastIndex(dragedRequestIndex),
-        newIndex: pathToLastIndex(destinationRequestIndex),
-        folderPath: destinationCollectionIndex,
-      })
       toast.success(`${t("request.order_changed")}`)
     }
   } else if (hasTeamWriteAccess.value) {
@@ -1628,14 +1659,25 @@ const updateRequestOrder = (payload: {
  */
 const updateCollectionOrder = (payload: {
   dragedCollectionIndex: string
-  destinationCollectionIndex: string
+  destinationCollection: {
+    destinationCollectionIndex: string | null
+    destinationCollectionParentIndex: string | null
+  }
 }) => {
-  const { dragedCollectionIndex, destinationCollectionIndex } = payload
+  const { dragedCollectionIndex, destinationCollection } = payload
-  if (!dragedCollectionIndex || !destinationCollectionIndex) return
+  const { destinationCollectionIndex, destinationCollectionParentIndex } =
+    destinationCollection
+  if (!dragedCollectionIndex) return
   if (dragedCollectionIndex === destinationCollectionIndex) return
 
   if (collectionsType.value.type === "my-collections") {
-    if (!isSameSameParent(dragedCollectionIndex, destinationCollectionIndex)) {
+    if (
+      !isSameSameParent(
+        dragedCollectionIndex,
+        destinationCollectionIndex,
+        destinationCollectionParentIndex
+      )
+    ) {
       toast.error(`${t("collection.different_parent")}`)
     } else {
       updateRESTCollectionOrder(
@@ -1644,7 +1686,9 @@ const updateCollectionOrder = (payload: {
       )
       resolveSaveContextOnCollectionReorder({
         lastIndex: pathToLastIndex(dragedCollectionIndex),
-        newIndex: pathToLastIndex(destinationCollectionIndex),
+        newIndex: pathToLastIndex(
+          destinationCollectionIndex ? destinationCollectionIndex : ""
+        ),
         folderPath: dragedCollectionIndex.split("/").slice(0, -1).join("/"),
       })
       toast.success(`${t("collection.order_changed")}`)

packages/hoppscotch-common/src/helpers/backend/gql/mutations/UpdateCollectionOrder.graphql

@@ -1,3 +1,3 @@
-mutation UpdateCollectionOrder($collectionID: ID!, $destCollID: ID!) {
+mutation UpdateCollectionOrder($collectionID: ID!, $destCollID: ID) {
   updateCollectionOrder(collectionID: $collectionID, destCollID: $destCollID)
 }

packages/hoppscotch-common/src/helpers/backend/mutations/TeamCollection.ts

@@ -103,7 +103,7 @@ export const moveRESTTeamCollection = (
 
 export const updateOrderRESTTeamCollection = (
   collectionID: string,
-  destCollID: string
+  destCollID: string | null
 ) =>
   runMutation<
     UpdateCollectionOrderMutation,

packages/hoppscotch-common/src/helpers/backend/mutations/TeamRequest.ts

@@ -84,7 +84,7 @@ export const moveRESTTeamRequest = (collectionID: string, requestID: string) =>
 
 export const updateOrderRESTTeamRequest = (
   requestID: string,
-  nextRequestID: string,
+  nextRequestID: string | null,
   collectionID: string
 ) =>
   runMutation<

packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts

@@ -558,11 +558,30 @@ export default class NewTeamCollectionAdapter {
 
   public updateRequestOrder(
     dragedRequestID: string,
-    destinationRequestID: string,
+    destinationRequestID: string | null,
     destinationCollectionID: string
   ) {
     const tree = this.collections$.value
 
+    // If the destination request is null, then it is the last request in the collection
+    if (destinationRequestID === null) {
+      const collection = findCollInTree(tree, destinationCollectionID)
+
+      if (!collection) return // Ignore order update
+
+      // Collection is not expanded
+      if (!collection.requests) return
+
+      const requestIndex = collection.requests.findIndex(
+        (req) => req.id === dragedRequestID
+      )
+
+      // If the collection index is not found, don't update
+      if (requestIndex === -1) return
+
+      // Move the request to the end of the requests
+      collection.requests.push(collection.requests.splice(requestIndex, 1)[0])
+    } else {
       // Find collection in tree, don't attempt if no collection is found
       const collection = findCollInTree(tree, destinationCollectionID)
       if (!collection) return // Ignore order update
@@ -580,16 +599,39 @@ export default class NewTeamCollectionAdapter {
       if (requestIndex === -1) return
 
       this.reorderItems(collection.requests, requestIndex, destinationIndex)
+    }
 
     this.collections$.next(tree)
   }
 
   public updateCollectionOrder = (
     collectionID: string,
-    destinationCollectionID: string
+    destinationCollectionID: string | null
   ) => {
     const tree = this.collections$.value
 
+    // If the destination collection is null, then it is the last collection in the tree
+    if (destinationCollectionID === null) {
+      const collLast = findParentOfColl(tree, collectionID)
+      if (collLast && collLast.children) {
+        const collectionIndex = collLast.children.findIndex(
+          (coll) => coll.id === collectionID
+        )
+
+        // reorder the collection to the end of the collections
+        collLast.children.push(collLast.children.splice(collectionIndex, 1)[0])
+      } else {
+        const collectionIndex = tree.findIndex(
+          (coll) => coll.id === collectionID
+        )
+
+        // If the collection index is not found, don't update
+        if (collectionIndex === -1) return
+
+        // reorder the collection to the end of the collections in the root
+        tree.push(tree.splice(collectionIndex, 1)[0])
+      }
+    } else {
       // Find collection in tree
       const coll = findParentOfColl(tree, destinationCollectionID)
 
@@ -609,7 +651,9 @@ export default class NewTeamCollectionAdapter {
         this.reorderItems(coll.children, collectionIndex, destinationIndex)
       } else {
         // If the collection has no parent collection, it is a root collection
-      const collectionIndex = tree.findIndex((coll) => coll.id === collectionID)
+        const collectionIndex = tree.findIndex(
+          (coll) => coll.id === collectionID
+        )
 
         const destinationIndex = tree.findIndex(
           (coll) => coll.id === destinationCollectionID
@@ -620,6 +664,7 @@ export default class NewTeamCollectionAdapter {
 
         this.reorderItems(tree, collectionIndex, destinationIndex)
       }
+    }
 
     this.collections$.next(tree)
   }
@@ -821,12 +866,10 @@ export default class NewTeamCollectionAdapter {
         const { request } = requestOrderUpdated
         const { nextRequest } = requestOrderUpdated
 
-        if (!nextRequest) return
-
         this.updateRequestOrder(
           request.id,
-          nextRequest.id,
+          nextRequest ? nextRequest.id : null,
-          nextRequest.collectionID
+          nextRequest ? nextRequest.collectionID : request.collectionID
         )
       }
     )
@@ -851,9 +894,10 @@ export default class NewTeamCollectionAdapter {
         const { collection } = collectionOrderUpdated
         const { nextCollection } = collectionOrderUpdated
 
-        if (!nextCollection) return
+        this.updateCollectionOrder(
-
+          collection.id,
-        this.updateCollectionOrder(collection.id, nextCollection.id)
+          nextCollection ? nextCollection.id : null
+        )
       }
     )
   }

packages/hoppscotch-common/src/newstore/collections.ts

@@ -8,6 +8,7 @@ import {
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import { cloneDeep } from "lodash-es"
 import { getTabRefWithSaveContext } from "~/helpers/rest/tab"
+import { resolveSaveContextOnRequestReorder } from "~/helpers/collection/request"
 
 const defaultRESTCollectionState = {
   state: [
@@ -288,18 +289,49 @@ const restCollectionDispatchers = defineDispatchers({
       destinationCollectionIndex,
     }: {
       collectionIndex: string
-      destinationCollectionIndex: string
+      destinationCollectionIndex: string | null
     }
   ) {
     const newState = state
 
     const indexPaths = collectionIndex.split("/").map((x) => parseInt(x))
 
+    if (indexPaths.length === 0) {
+      console.log("Given path too short. Skipping request.")
+      return {}
+    }
+
+    // Reordering the collection to the last position
+    if (destinationCollectionIndex === null) {
+      const folderIndex = indexPaths.pop() as number
+
+      const containingFolder = navigateToFolderWithIndexPath(
+        newState,
+        indexPaths
+      )
+
+      if (containingFolder === null) {
+        newState.push(newState.splice(folderIndex, 1)[0])
+        return {
+          state: newState,
+        }
+      }
+
+      // Pushing the folder to the end of the array (last position)
+      containingFolder.folders.push(
+        containingFolder.folders.splice(folderIndex, 1)[0]
+      )
+
+      return {
+        state: newState,
+      }
+    }
+
     const destinationIndexPaths = destinationCollectionIndex
       .split("/")
       .map((x) => parseInt(x))
 
-    if (indexPaths.length === 0 || destinationIndexPaths.length === 0) {
+    if (destinationIndexPaths.length === 0) {
       console.log("Given path too short. Skipping request.")
       return {}
     }
@@ -487,7 +519,7 @@ const restCollectionDispatchers = defineDispatchers({
       destinationCollectionPath,
     }: {
       requestIndex: number
-      destinationRequestIndex: number
+      destinationRequestIndex: number | null
       destinationCollectionPath: string
     }
   ) {
@@ -511,8 +543,32 @@ const restCollectionDispatchers = defineDispatchers({
       return {}
     }
 
+    // if the destination is null, we are moving to the end of the list
+    if (destinationRequestIndex === null) {
+      // move to the end of the list
+      targetLocation.requests.push(
+        targetLocation.requests.splice(requestIndex, 1)[0]
+      )
+
+      resolveSaveContextOnRequestReorder({
+        lastIndex: requestIndex,
+        newIndex: targetLocation.requests.length,
+        folderPath: destinationCollectionPath,
+      })
+
+      return {
+        state: newState,
+      }
+    }
+
     reorderItems(targetLocation.requests, requestIndex, destinationRequestIndex)
 
+    resolveSaveContextOnRequestReorder({
+      lastIndex: requestIndex,
+      newIndex: destinationRequestIndex,
+      folderPath: destinationCollectionPath,
+    })
+
     return {
       state: newState,
     }
@@ -967,7 +1023,7 @@ export function moveRESTRequest(
 
 export function updateRESTRequestOrder(
   requestIndex: number,
-  destinationRequestIndex: number,
+  destinationRequestIndex: number | null,
   destinationCollectionPath: string
 ) {
   restCollectionStore.dispatch({
@@ -982,7 +1038,7 @@ export function updateRESTRequestOrder(
 
 export function updateRESTCollectionOrder(
   collectionIndex: string,
-  destinationCollectionIndex: string
+  destinationCollectionIndex: string | null
 ) {
   restCollectionStore.dispatch({
     dispatcher: "updateCollectionOrder",