From 62058d5dfef959a9d329f957bc2d44345da52865 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Wed, 5 Apr 2023 21:56:42 +0600
Subject: [PATCH 1/2] fix: tabhead and scrolling issue (#2966)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../hoppscotch-common/src/components.d.ts     |   3 +-
 .../hoppscotch-common/src/pages/index.vue     |  34 ++++--
 .../{.prettierrc.js => .prettierrc.cjs}       |   0
 packages/hoppscotch-ui/package.json           |   1 +
 .../src/components/smart/Window.vue           |  31 +++--
 .../src/components/smart/Windows.vue          | 109 +++++++++++++-----
 6 files changed, 128 insertions(+), 50 deletions(-)
 rename packages/hoppscotch-ui/{.prettierrc.js => .prettierrc.cjs} (100%)

diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index 9fc832795..4974d069b 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -16,7 +16,6 @@ declare module '@vue/runtime-core' {
     AppHeader: typeof import('./components/app/Header.vue')['default']
     AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
     AppLogo: typeof import('./components/app/Logo.vue')['default']
-    AppNavigation: typeof import('./components/app/Navigation.vue')['default']
     AppOptions: typeof import('./components/app/Options.vue')['default']
     AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
     AppPowerSearch: typeof import('./components/app/PowerSearch.vue')['default']
@@ -117,6 +116,7 @@ declare module '@vue/runtime-core' {
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -125,6 +125,7 @@ declare module '@vue/runtime-core' {
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
diff --git a/packages/hoppscotch-common/src/pages/index.vue b/packages/hoppscotch-common/src/pages/index.vue
index b095878bc..954737ccd 100644
--- a/packages/hoppscotch-common/src/pages/index.vue
+++ b/packages/hoppscotch-common/src/pages/index.vue
@@ -16,19 +16,33 @@
             :key="tab.id"
             :label="tab.document.request.name"
             :is-removable="tabs.length > 1"
+            :close-visibility="'hover'"
           >
             <template #tabhead>
-              <span
-                class="font-semibold truncate text-tiny w-10"
-                :class="getMethodLabelColorClassOf(tab.document.request)"
+              <div
+                v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+                :title="tab.document.request.name"
+                class="truncate px-2"
               >
-                {{ tab.document.request.method }}
-              </span>
-              <span class="text-green-600 mr-1" v-if="tab.document.isDirty">
-                •
-              </span>
-              <span class="truncate flex-1">
-                {{ tab.document.request.name }}
+                <span
+                  class="font-semibold text-tiny"
+                  :class="getMethodLabelColorClassOf(tab.document.request)"
+                >
+                  {{ tab.document.request.method }}
+                </span>
+                <span class="leading-8 px-2">
+                  {{ tab.document.request.name }}
+                </span>
+              </div>
+            </template>
+            <template #suffix>
+              <span
+                class="text-green-600 text-[8px] group-hover:hidden w-4"
+                v-if="tab.document.isDirty"
+              >
+                <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
+                  <circle cx="12" cy="12" r="10" fill="currentColor"></circle>
+                </svg>
               </span>
             </template>
             <HttpRequestTab
diff --git a/packages/hoppscotch-ui/.prettierrc.js b/packages/hoppscotch-ui/.prettierrc.cjs
similarity index 100%
rename from packages/hoppscotch-ui/.prettierrc.js
rename to packages/hoppscotch-ui/.prettierrc.cjs
diff --git a/packages/hoppscotch-ui/package.json b/packages/hoppscotch-ui/package.json
index 4a3c91c89..36c6a920d 100644
--- a/packages/hoppscotch-ui/package.json
+++ b/packages/hoppscotch-ui/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
+    "watch": "vite build --watch",
     "build": "vite build",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
diff --git a/packages/hoppscotch-ui/src/components/smart/Window.vue b/packages/hoppscotch-ui/src/components/smart/Window.vue
index 0e28df2e1..8b08c3547 100644
--- a/packages/hoppscotch-ui/src/components/smart/Window.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Window.vue
@@ -21,23 +21,32 @@ import { TabMeta, TabProvider } from "./Windows.vue"
 
 const slots = useSlots()
 
-const props = defineProps({
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  id: { type: String, default: null, required: true },
-  isRemovable: { type: Boolean, default: true },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    label: string | null
+    info: string | null
+    id: string
+    isRemovable: boolean
+    closeVisibility: "hover" | "always" | "never"
+    selected: boolean
+  }>(),
+  {
+    label: null,
+    info: null,
+    isRemovable: true,
+    closeVisibility: "always",
+    selected: false,
+  }
+)
 
 const tabMeta = computed<TabMeta>(() => ({
   info: props.info,
   label: props.label,
   isRemovable: props.isRemovable,
   icon: slots.icon,
-  tabhead: slots.tabhead
+  suffix: slots.suffix,
+  tabhead: slots.tabhead,
+  closeVisibility: props.closeVisibility,
 }))
 
 const {
diff --git a/packages/hoppscotch-ui/src/components/smart/Windows.vue b/packages/hoppscotch-ui/src/components/smart/Windows.vue
index d15c4bbef..c22b5cedc 100644
--- a/packages/hoppscotch-ui/src/components/smart/Windows.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Windows.vue
@@ -1,43 +1,95 @@
 <template>
   <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
-    <div class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs bg-primaryLight">
-      <div class="flex flex-1 flex-shrink-0 w-0 overflow-x-auto" ref="scrollContainer">
-        <div class="flex justify-between divide-x divide-dividerLight" @wheel="scrollOnWindows">
+    <div
+      class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs bg-primaryLight"
+    >
+      <div
+        class="flex flex-1 flex-shrink-0 w-0 overflow-x-auto"
+        ref="scrollContainer"
+      >
+        <div
+          class="flex justify-between divide-x divide-dividerLight"
+          @wheel.prevent="scroll"
+        >
           <div class="flex">
-            <draggable v-bind="dragOptions" :list="tabEntries" :style="tabStyles" :item-key="'window-'"
-              class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight" @sort="sortTabs">
+            <draggable
+              v-bind="dragOptions"
+              :list="tabEntries"
+              :style="tabStyles"
+              :item-key="'window-'"
+              class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight"
+              @sort="sortTabs"
+            >
               <template #item="{ element: [tabID, tabMeta] }">
-                <button :key="`removable-tab-${tabID}`" class="tab" :class="[{ active: modelValue === tabID }]"
-                  :aria-label="tabMeta.label || ''" role="button" @keyup.enter="selectTab(tabID)"
-                  @click="selectTab(tabID)">
+                <button
+                  :key="`removable-tab-${tabID}`"
+                  class="tab group px-2"
+                  :class="[{ active: modelValue === tabID }]"
+                  :aria-label="tabMeta.label || ''"
+                  role="button"
+                  @keyup.enter="selectTab(tabID)"
+                  @click="selectTab(tabID)"
+                >
+                  <span
+                    v-if="tabMeta.icon"
+                    class="flex items-center justify-center cursor-pointer"
+                  >
+                    <component :is="tabMeta.icon" class="w-4 h-4 svg-icons" />
+                  </span>
 
-                  <div v-if="!tabMeta.tabhead" class="flex items-stretch truncate">
-                    <span v-if="tabMeta.icon" class="flex items-center justify-center mx-4 cursor-pointer">
-                      <component :is="tabMeta.icon" class="w-4 h-4 svg-icons" />
-                    </span>
-                    <span class="truncate pl-4">
+                  <div
+                    v-if="!tabMeta.tabhead"
+                    class="truncate w-full text-left px-2"
+                  >
+                    <span class="truncate">
                       {{ tabMeta.label }}
                     </span>
                   </div>
 
-                  <div v-else class="truncate flex items-center justify-start mx-4">
+                  <div v-else class="truncate w-full text-left">
                     <component :is="tabMeta.tabhead" />
                   </div>
 
-                  <HoppButtonSecondary v-tippy="{ theme: 'tooltip', delay: [500, 20] }" :icon="IconX" :style="{
-                    display: tabMeta.isRemovable ? 'flex' : 'none',
-                  }" :title="closeText ?? t?.('action.close') ?? 'Close'"
-                    :class="[{ active: modelValue === tabID }, 'close']" class="mx-2 !p-0.5"
-                    @click.stop="emit('removeTab', tabID)" />
+                  <component v-if="tabMeta.suffix" :is="tabMeta.suffix" />
+
+                  <HoppButtonSecondary
+                    v-if="tabMeta.isRemovable"
+                    v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+                    :icon="IconX"
+                    :title="closeText ?? t?.('action.close') ?? 'Close'"
+                    :class="[
+                      { active: modelValue === tabID },
+                      {
+                        flex: tabMeta.closeVisibility === 'always',
+                        'group-hover:flex hidden':
+                          tabMeta.closeVisibility === 'hover',
+                        hidden: tabMeta.closeVisibility === 'never',
+                      },
+                      'close',
+                    ]"
+                    class="!p-0.5"
+                    @click.stop="emit('removeTab', tabID)"
+                  />
                 </button>
               </template>
             </draggable>
           </div>
-          <div class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-8">
+          <div
+            class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-8"
+          >
             <slot name="actions">
-              <span v-if="canAddNewTab" class="flex items-center justify-center px-2 py-1.5 bg-primaryLight z-8">
-                <HoppButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="newText ?? t?.('action.new') ?? 'New'"
-                  :icon="IconPlus" class="rounded !p-1" filled @click="addTab" />
+              <span
+                v-if="canAddNewTab"
+                class="flex items-center justify-center px-2 py-1.5 bg-primaryLight z-8 h-full"
+              >
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="newText ?? t?.('action.new') ?? 'New'"
+                  :icon="IconPlus"
+                  class="rounded !p-1"
+                  filled
+                  @click="addTab"
+                />
               </span>
             </slot>
           </div>
@@ -66,9 +118,11 @@ import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
 export type TabMeta = {
   label: string | null
   icon: Slot | undefined
+  suffix: Slot | undefined
   tabhead: Slot | undefined
   info: string | null
   isRemovable: boolean
+  closeVisibility: "hover" | "always" | "never"
 }
 export type TabProvider = {
   // Whether inactive tabs should remain rendered
@@ -187,12 +241,11 @@ const addTab = () => {
   emit("addTab")
 }
 
-const scrollContainer = ref<HTMLElement|null>(null)
+const scrollContainer = ref<HTMLElement | null>(null)
 
-const scrollOnWindows = (event: WheelEvent) => {
-  event.preventDefault()
-  if(scrollContainer.value)
-    scrollContainer.value.scrollLeft += event.deltaY
+const scroll = (e: WheelEvent) => {
+  scrollContainer.value!.scrollLeft += e.deltaY
+  scrollContainer.value!.scrollLeft += e.deltaX
 }
 </script>
 

From 8590a9a110947fbaf707e2308ab5c5d97c20c186 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Wed, 5 Apr 2023 21:35:14 +0530
Subject: [PATCH 2/2] fix: reordering last request bug and its UX (#2967)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../src/components/collections/Collection.vue | 14 ++-
 .../components/collections/MyCollections.vue  | 80 ++++++++--------
 .../collections/TeamCollections.vue           | 96 ++++++++++---------
 .../src/components/collections/index.vue      | 36 ++++++-
 4 files changed, 134 insertions(+), 92 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/Collection.vue b/packages/hoppscotch-common/src/components/collections/Collection.vue
index 7babb29f1..0c069a545 100644
--- a/packages/hoppscotch-common/src/components/collections/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/Collection.vue
@@ -16,7 +16,8 @@
       <div
         class="absolute bg-accent opacity-0 pointer-events-none inset-0 z-1 transition"
         :class="{
-          'opacity-25': dragging && notSameDestination,
+          'opacity-25':
+            dragging && notSameDestination && notSameParentDestination,
         }"
       ></div>
       <div
@@ -308,7 +309,7 @@ const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
 watch(
   () => dragging.value,
   (val) => {
-    if (val && notSameDestination.value) {
+    if (val && notSameDestination.value && notSameParentDestination.value) {
       emit("dragging", true)
     } else {
       emit("dragging", false)
@@ -338,6 +339,10 @@ watch(
   }
 )
 
+const notSameParentDestination = computed(() => {
+  return currentReorderingStatus.value.parentID !== props.id
+})
+
 const isRequestDragging = computed(() => {
   return currentReorderingStatus.value.type === "request"
 })
@@ -392,7 +397,8 @@ const handleDragOver = (e: DragEvent) => {
     e.offsetY > 18 &&
     notSameDestination.value &&
     !isRequestDragging.value &&
-    isSameParent.value
+    isSameParent.value &&
+    props.isLastItem
   ) {
     orderingLastItem.value = true
     dragging.value = false
@@ -409,7 +415,7 @@ const handelDrop = (e: DragEvent) => {
   } else if (orderingLastItem.value) {
     updateLastItemOrder(e)
   } else {
-    dropEvent(e)
+    notSameParentDestination.value ? dropEvent(e) : e.stopPropagation()
   }
 }
 
diff --git a/packages/hoppscotch-common/src/components/collections/MyCollections.vue b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
index ca13025a4..5b9f2be0d 100644
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -504,45 +504,41 @@ const emit = defineEmits<{
 
 const refFilterCollection = toRef(props, "filteredCollections")
 
-const pathToIndex = computed(() => {
-  return (path: string) => {
-    const pathArr = path.split("/")
-    return pathArr[pathArr.length - 1]
-  }
-})
+const pathToIndex = (path: string) => {
+  const pathArr = path.split("/")
+  return pathArr[pathArr.length - 1]
+}
 
-const isSelected = computed(() => {
-  return ({
-    collectionIndex,
-    folderPath,
-    requestIndex,
-  }: {
-    collectionIndex?: number | undefined
-    folderPath?: string | undefined
-    requestIndex?: number | undefined
-  }) => {
-    if (collectionIndex !== undefined) {
-      return (
-        props.picked &&
-        props.picked.pickedType === "my-collection" &&
-        props.picked.collectionIndex === collectionIndex
-      )
-    } else if (requestIndex !== undefined && folderPath !== undefined) {
-      return (
-        props.picked &&
-        props.picked.pickedType === "my-request" &&
-        props.picked.folderPath === folderPath &&
-        props.picked.requestIndex === requestIndex
-      )
-    } else {
-      return (
-        props.picked &&
-        props.picked.pickedType === "my-folder" &&
-        props.picked.folderPath === folderPath
-      )
-    }
+const isSelected = ({
+  collectionIndex,
+  folderPath,
+  requestIndex,
+}: {
+  collectionIndex?: number | undefined
+  folderPath?: string | undefined
+  requestIndex?: number | undefined
+}) => {
+  if (collectionIndex !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-collection" &&
+      props.picked.collectionIndex === collectionIndex
+    )
+  } else if (requestIndex !== undefined && folderPath !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-request" &&
+      props.picked.folderPath === folderPath &&
+      props.picked.requestIndex === requestIndex
+    )
+  } else {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-folder" &&
+      props.picked.folderPath === folderPath
+    )
   }
-})
+}
 
 const active = computed(() => currentActiveTab.value.document.saveContext)
 
@@ -706,7 +702,10 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
           ...item.folders.map((folder, index) => ({
             id: `${id}/${index}`,
             data: {
-              isLastItem: index === item.folders.length - 1,
+              isLastItem:
+                item.folders && item.folders.length > 1
+                  ? index === item.folders.length - 1
+                  : false,
               type: "folders",
               data: {
                 parentIndex: id,
@@ -717,7 +716,10 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
           ...item.requests.map((requests, index) => ({
             id: `${id}/${index}`,
             data: {
-              isLastItem: index === item.requests.length - 1,
+              isLastItem:
+                item.requests && item.requests.length > 1
+                  ? index === item.requests.length - 1
+                  : false,
               type: "requests",
               data: {
                 parentIndex: id,
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 2c7a8c379..9a05330e3 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -517,54 +517,50 @@ const hasNoTeamAccess = computed(
       props.collectionsType.selectedTeam.myRole === "VIEWER")
 )
 
-const isSelected = computed(() => {
-  return ({
-    collectionID,
-    folderID,
-    requestID,
-  }: {
-    collectionID?: string | undefined
-    folderID?: string | undefined
-    requestID?: string | undefined
-  }) => {
-    if (collectionID !== undefined) {
-      return (
-        props.picked &&
-        props.picked.pickedType === "teams-collection" &&
-        props.picked.collectionID === collectionID
-      )
-    } else if (requestID !== undefined) {
-      return (
-        props.picked &&
-        props.picked.pickedType === "teams-request" &&
-        props.picked.requestID === requestID
-      )
-    } else {
-      return (
-        props.picked &&
-        props.picked.pickedType === "teams-folder" &&
-        props.picked.folderID === folderID
-      )
-    }
+const isSelected = ({
+  collectionID,
+  folderID,
+  requestID,
+}: {
+  collectionID?: string | undefined
+  folderID?: string | undefined
+  requestID?: string | undefined
+}) => {
+  if (collectionID !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "teams-collection" &&
+      props.picked.collectionID === collectionID
+    )
+  } else if (requestID !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "teams-request" &&
+      props.picked.requestID === requestID
+    )
+  } else {
+    return (
+      props.picked &&
+      props.picked.pickedType === "teams-folder" &&
+      props.picked.folderID === folderID
+    )
   }
-})
+}
 
 const active = computed(() => currentActiveTab.value.document.saveContext)
 
-const isActiveRequest = computed(() => {
-  return (requestID: string) => {
-    return pipe(
-      active.value,
-      O.fromNullable,
-      O.filter(
-        (active) =>
-          active.originLocation === "team-collection" &&
-          active.requestID === requestID
-      ),
-      O.isSome
-    )
-  }
-})
+const isActiveRequest = (requestID: string) => {
+  return pipe(
+    active.value,
+    O.fromNullable,
+    O.filter(
+      (active) =>
+        active.originLocation === "team-collection" &&
+        active.requestID === requestID
+    ),
+    O.isSome
+  )
+}
 
 const selectRequest = (data: {
   request: HoppRESTRequest
@@ -580,7 +576,7 @@ const selectRequest = (data: {
     emit("select-request", {
       request: request,
       requestIndex: requestIndex,
-      isActive: isActiveRequest.value(requestIndex),
+      isActive: isActiveRequest(requestIndex),
     })
   }
 }
@@ -749,7 +745,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
                 ? items.children.map((item, index) => ({
                     id: `${id}/${item.id}`,
                     data: {
-                      isLastItem: index === items.children.length - 1,
+                      isLastItem:
+                        items.children && items.children.length > 1
+                          ? index === items.children.length - 1
+                          : false,
                       type: "folders",
                       data: {
                         parentIndex: parsedID,
@@ -762,7 +761,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
                 ? items.requests.map((item, index) => ({
                     id: `${id}/${item.id}`,
                     data: {
-                      isLastItem: index === items.requests.length - 1,
+                      isLastItem:
+                        items.requests && items.requests.length > 1
+                          ? index === items.requests.length - 1
+                          : false,
                       type: "requests",
                       data: {
                         parentIndex: parsedID,
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 61d53a996..979630df7 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -1395,6 +1395,27 @@ const checkIfCollectionIsAParentOfTheChildren = (
   return false
 }
 
+const isMoveToSameLocation = (
+  draggedItemPath: string,
+  destinationPath: string
+) => {
+  const draggedItemPathArr = pathToIndex(draggedItemPath)
+  const destinationPathArr = pathToIndex(destinationPath)
+
+  if (draggedItemPathArr.length > 0) {
+    const draggedItemParentPathArr = draggedItemPathArr.slice(
+      0,
+      draggedItemPathArr.length - 1
+    )
+
+    if (isEqual(draggedItemParentPathArr, destinationPathArr)) {
+      return true
+    } else {
+      return false
+    }
+  }
+}
+
 /**
  * This function is called when the user moves the collection
  * to a different collection or folder
@@ -1419,6 +1440,13 @@ const dropCollection = (payload: {
       return
     }
 
+    //check if the collection is being moved to its own parent
+    if (
+      isMoveToSameLocation(collectionIndexDragged, destinationCollectionIndex)
+    ) {
+      return
+    }
+
     const parentFolder = collectionIndexDragged
       .split("/")
       .slice(0, -1)
@@ -1556,10 +1584,14 @@ const isSameSameParent = (
     draggedItemIndex.length === 1
   ) {
     return draggedItemIndex[0] === destinationCollectionIndex
-  } else if (destinationItemPath === null && draggedItemIndex.length !== 1) {
+  } else if (
+    destinationItemPath === null &&
+    draggedItemIndex.length !== 1 &&
+    destinationCollectionIndex !== null
+  ) {
     const dragedItemParent = draggedItemIndex.slice(0, -1)
 
-    return dragedItemParent[0] === destinationCollectionIndex
+    return dragedItemParent.join("/") === destinationCollectionIndex
   } else {
     if (destinationItemPath === null) return false
     const destinationItemIndex = pathToIndex(destinationItemPath)