From ab7df212c215a6668fb575d2320093de003bae97 Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Sun, 4 Feb 2024 20:34:23 +0530
Subject: [PATCH] refactor: iterations

---
 .../new-collections/rest/Collection.vue       |  51 +-
 .../new-collections/rest/Request.vue          |  47 +-
 .../components/new-collections/rest/index.vue | 515 ++++++++++++++--
 .../WorkspaceRESTCollectionTreeAdapter.ts     |   2 +-
 .../src/helpers/rest/labelColoring.ts         |  24 +-
 packages/hoppscotch-common/src/index.ts       |   6 +-
 .../src/newstore/collections.ts               |   1 +
 .../src/services/new-workspace/index.ts       | 187 +++++-
 .../src/services/new-workspace/provider.ts    |  31 +-
 .../providers/personal.workspace.ts           | 556 ++++++++++++++----
 .../src/services/new-workspace/view.ts        |   2 +
 11 files changed, 1235 insertions(+), 187 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue b/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
index 14560a263..196a423cc 100644
--- a/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
@@ -22,20 +22,28 @@
             </span>
           </span>
         </div>
-        <div v-if="!collectionReadonly" class="flex">
+        <div class="flex">
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :icon="IconFilePlus"
             :title="t('request.new')"
             class="hidden group-hover:inline-flex"
-            @click="emit('add-request')"
+            @click="
+              emit('add-request', {
+                path: collection.collectionID,
+              })
+            "
           />
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :icon="IconFolderPlus"
             :title="t('folder.new')"
             class="hidden group-hover:inline-flex"
-            @click="emit('add-folder')"
+            @click="
+              emit('add-folder', {
+                path: collection.collectionID,
+              })
+            "
           />
           <span>
             <tippy
@@ -69,7 +77,9 @@
                     :shortcut="['R']"
                     @click="
                       () => {
-                        emit('add-request')
+                        emit('add-request', {
+                          path: collection.collectionID,
+                        })
                         hide()
                       }
                     "
@@ -81,7 +91,9 @@
                     :shortcut="['N']"
                     @click="
                       () => {
-                        emit('add-folder')
+                        emit('add-folder', {
+                          path: collection.collectionID,
+                        })
                         hide()
                       }
                     "
@@ -105,8 +117,7 @@
                     :shortcut="['X']"
                     @click="
                       () => {
-                        emit('export-data'),
-                          collectionsType === 'my-collections' ? hide() : null
+                        emit('export-data'), hide()
                       }
                     "
                   />
@@ -117,7 +128,9 @@
                     :shortcut="['⌫']"
                     @click="
                       () => {
-                        emit('remove-collection')
+                        emit('remove-collection', {
+                          path: collection.collectionID,
+                        })
                         hide()
                       }
                     "
@@ -150,17 +163,31 @@ const t = useI18n()
 
 const props = defineProps<{
   collection: RESTCollectionViewCollection
-  collectionReadonly: boolean
   isOpen: boolean
 }>()
 
 const emit = defineEmits<{
   (event: "toggle-children"): void
-  (event: "add-request"): void
-  (event: "add-folder"): void
+  (
+    event: "add-request",
+    payload: {
+      path: string
+    }
+  ): void
+  (
+    event: "add-folder",
+    payload: {
+      path: string
+    }
+  ): void
   (event: "edit-collection"): void
   (event: "export-data"): void
-  (event: "remove-collection"): void
+  (
+    event: "remove-collection",
+    payload: {
+      path: string
+    }
+  ): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
diff --git a/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue b/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
index c2705e6ca..532c572f5 100644
--- a/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
@@ -6,6 +6,7 @@
     >
       <div
         class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
+        @click="selectRequest(request.requestID, request.request)"
       >
         <span
           class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
@@ -38,12 +39,13 @@
           </span>
         </span>
       </div>
-      <div v-if="!collectionReadonly" class="flex">
+      <div class="flex">
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconRotateCCW"
           :title="t('action.restore')"
           class="hidden group-hover:inline-flex"
+          @click="selectRequest(request.requestID, request.request)"
         />
         <span>
           <tippy
@@ -75,7 +77,10 @@
                   :shortcut="['E']"
                   @click="
                     () => {
-                      emit('edit-request')
+                      emit('edit-request', {
+                        requestPath: request.requestID,
+                        request: request.request,
+                      })
                       hide()
                     }
                   "
@@ -87,7 +92,10 @@
                   :shortcut="['D']"
                   @click="
                     () => {
-                      emit('duplicate-request')
+                      emit('duplicate-request', {
+                        requestPath: request.requestID,
+                        request: request.request,
+                      })
                       hide()
                     }
                   "
@@ -124,12 +132,37 @@ import { RESTCollectionViewRequest } from "~/services/new-workspace/view"
 import { computed, ref } from "vue"
 import { TippyComponent } from "vue-tippy"
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
+import { HoppRESTRequest } from "@hoppscotch/data"
 
 const t = useI18n()
 
 const props = defineProps<{
   request: RESTCollectionViewRequest
-  collectionReadonly: boolean
+}>()
+
+const emit = defineEmits<{
+  (
+    event: "duplicate-request",
+    payload: {
+      requestPath: string
+      request: HoppRESTRequest
+    }
+  ): void
+  (
+    event: "edit-request",
+    payload: {
+      requestPath: string
+      request: HoppRESTRequest
+    }
+  ): void
+  (event: "remove-request"): void
+  (
+    event: "select-request",
+    payload: {
+      requestPath: string
+      request: HoppRESTRequest
+    }
+  ): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -141,4 +174,10 @@ const isActive = ref(true)
 const requestLabelColor = computed(() =>
   getMethodLabelColorClassOf(props.request)
 )
+
+const selectRequest = (requestPath: string, request: HoppRESTRequest) =>
+  emit("select-request", {
+    requestPath,
+    request,
+  })
 </script>
diff --git a/packages/hoppscotch-common/src/components/new-collections/rest/index.vue b/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
index fa541bd0c..0e7914f54 100644
--- a/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
@@ -1,20 +1,10 @@
 <template>
-  <div v-if="collectionsAreReadonly !== undefined" class="flex flex-1 flex-col">
+  <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
       :style="'top: var(--upper-primary-sticky-fold)'"
     >
       <HoppButtonSecondary
-        v-if="collectionsAreReadonly"
-        v-tippy="{ theme: 'tooltip' }"
-        disabled
-        class="!rounded-none"
-        :icon="IconPlus"
-        :title="t('team.no_access')"
-        :label="t('add.new')"
-      />
-      <HoppButtonSecondary
-        v-else
         :icon="IconPlus"
         :label="t('add.new')"
         class="!rounded-none"
@@ -36,59 +26,114 @@
         />
       </span>
     </div>
+
     <div class="flex flex-1 flex-col">
       <HoppSmartTree :adapter="treeAdapter">
-        <template
-          #content="{ node, toggleChildren, isOpen, highlightChildren }"
-        >
+        <template #content="{ node, toggleChildren, isOpen }">
           <!-- TODO: Implement -->
           <NewCollectionsRestCollection
             v-if="node.data.type === 'collection'"
             :collection="node.data.value"
-            :collection-readonly="collectionsAreReadonly"
             :is-open="isOpen"
+            @add-request="addRequest"
+            @add-folder="addFolder"
+            @remove-collection="removeFolder"
             @toggle-children="toggleChildren"
           />
+          <NewCollectionsRestRequest
+            v-else-if="node.data.type === 'request'"
+            :request="node.data.value"
+            @duplicate-request="duplicateRequest"
+            @edit-request="editRequest"
+            @remove-request="removeRequest(node.data.value.requestID)"
+            @select-request="selectRequest"
+          />
           <div v-else @click="toggleChildren">
             {{ node.data.value }}
           </div>
         </template>
-        <template #emptyNode="{ node }">
+        <template #emptyNode>
           <!-- TODO: Implement -->
           <div>Empty Node!</div>
         </template>
       </HoppSmartTree>
     </div>
+
     <CollectionsAdd
       :show="showModalAdd"
       :loading-state="modalLoadingState"
       @submit="addNewRootCollection"
       @hide-modal="showModalAdd = false"
     />
+    <CollectionsAddRequest
+      :show="showModalAddRequest"
+      :loading-state="modalLoadingState"
+      @add-request="onAddRequest"
+      @hide-modal="displayModalAddRequest(false)"
+    />
+    <CollectionsAddFolder
+      :show="showModalAddFolder"
+      :loading-state="modalLoadingState"
+      @add-folder="onAddFolder"
+      @hide-modal="displayModalAddFolder(false)"
+    />
+    <CollectionsEditRequest
+      v-model="editingRequestName"
+      :show="showModalEditRequest"
+      :loading-state="modalLoadingState"
+      @submit="onEditRequest"
+      @hide-modal="displayModalEditRequest(false)"
+    />
+
+    <HoppSmartConfirmModal
+      :show="showConfirmModal"
+      :title="confirmModalTitle"
+      :loading-state="modalLoadingState"
+      @hide-modal="showConfirmModal = false"
+      @resolve="resolveConfirmModal"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import * as E from "fp-ts/lib/Either"
 
+import { useService } from "dioc/vue"
+import { markRaw, ref } from "vue"
+
 import { useI18n } from "~/composables/i18n"
-import IconPlus from "~icons/lucide/plus"
-import IconHelpCircle from "~icons/lucide/help-circle"
-import IconImport from "~icons/lucide/folder-down"
-import { HandleRef } from "~/services/new-workspace/handle"
-import { Workspace } from "~/services/new-workspace/workspace"
-import { computed, markRaw, ref } from "vue"
+import { useToast } from "~/composables/toast"
 import { WorkspaceRESTCollectionTreeAdapter } from "~/helpers/adapters/WorkspaceRESTCollectionTreeAdapter"
 import { NewWorkspaceService } from "~/services/new-workspace"
-import { useService } from "dioc/vue"
+import { HandleRef } from "~/services/new-workspace/handle"
+import { Workspace } from "~/services/new-workspace/workspace"
+import { RESTTabService } from "~/services/tab/rest"
+import IconImport from "~icons/lucide/folder-down"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconPlus from "~icons/lucide/plus"
+import {
+  resolveSaveContextOnCollectionReorder,
+  getFoldersByPath,
+} from "~/helpers/collection/collection"
+import {
+  navigateToFolderWithIndexPath,
+  restCollectionStore,
+  removeRESTFolder,
+  restCollections$,
+} from "~/newstore/collections"
+import { useReadonlyStream } from "~/composables/stream"
+import { cloneDeep } from "lodash-es"
+import { HoppRESTRequest } from "@hoppscotch/data"
 
 const t = useI18n()
+const toast = useToast()
+const tabs = useService(RESTTabService)
 
 const props = defineProps<{
   workspaceHandle: HandleRef<Workspace>
 }>()
 
-const emit = defineEmits<{
+defineEmits<{
   (e: "display-modal-add"): void
   (e: "display-modal-import-export"): void
 }>()
@@ -101,18 +146,48 @@ const treeAdapter = markRaw(
   )
 )
 
-const collectionsAreReadonly = computed(() => {
-  if (props.workspaceHandle.value.type === "ok") {
-    return props.workspaceHandle.value.data.collectionsAreReadonly
-  }
-
-  return undefined
-})
-
-const showModalAdd = ref(false)
 const modalLoadingState = ref(false)
 
-async function addNewRootCollection(name: string) {
+const showModalAdd = ref(false)
+const showModalAddRequest = ref(false)
+const showModalAddFolder = ref(false)
+const showModalEditRequest = ref(false)
+const showConfirmModal = ref(false)
+
+const editingFolderPath = ref<string | null>(null)
+const editingRequest = ref<HoppRESTRequest | null>(null)
+const editingRequestName = ref("")
+const editingRequestIndex = ref<number | null>(null)
+
+const confirmModalTitle = ref<string | null>(null)
+
+const myCollections = useReadonlyStream(restCollections$, [], "deep")
+
+const displayModalAddRequest = (show: boolean) => {
+  showModalAddRequest.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const displayModalAddFolder = (show: boolean) => {
+  showModalAddFolder.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const displayModalEditRequest = (show: boolean) => {
+  showModalEditRequest.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const displayConfirmModal = (show: boolean) => {
+  showConfirmModal.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const addNewRootCollection = async (name: string) => {
   modalLoadingState.value = true
 
   const result = await workspaceService.createRESTRootCollection(
@@ -135,7 +210,379 @@ async function addNewRootCollection(name: string) {
   showModalAdd.value = false
 }
 
+const addRequest = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+  displayModalAddRequest(true)
+}
+
+const onAddRequest = async (requestName: string) => {
+  const path = editingFolderPath.value
+  if (!path) return
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    path
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  const result = await workspaceService.createRESTRequest(
+    collHandle,
+    requestName,
+    path
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  displayModalAddRequest(false)
+}
+
+const addFolder = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+  displayModalAddFolder(true)
+}
+
+const onAddFolder = async (folderName: string) => {
+  const path = editingFolderPath.value
+
+  if (!path) return
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    path
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  const result = await workspaceService.createRESTChildCollection(
+    collHandle,
+    folderName,
+    path
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  displayModalAddFolder(false)
+}
+
+const removeFolder = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+
+  confirmModalTitle.value = `${t("confirm.remove_folder")}`
+  displayConfirmModal(true)
+}
+
+const onRemoveFolder = () => {
+  const path = editingFolderPath.value
+
+  if (!path) return
+
+  const folderToRemove = path
+    ? navigateToFolderWithIndexPath(
+        restCollectionStore.value.state,
+        path.split("/").map((i) => parseInt(i))
+      )
+    : undefined
+
+  removeRESTFolder(path, folderToRemove ? folderToRemove.id : undefined)
+
+  const parentFolder = path.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
+  resolveSaveContextOnCollectionReorder({
+    lastIndex: pathToLastIndex(path),
+    newIndex: -1,
+    folderPath: parentFolder,
+    length: getFoldersByPath(myCollections.value, parentFolder).length,
+  })
+
+  toast.success(t("state.deleted"))
+  displayConfirmModal(false)
+}
+
+const removeRequest = (requestIndex: string) => {
+  const folderPath = requestIndex.slice(0, -2)
+  const requestID = requestIndex[requestIndex.length - 1]
+
+  editingFolderPath.value = folderPath
+  editingRequestIndex.value = parseInt(requestID)
+
+  confirmModalTitle.value = `${t("confirm.remove_request")}`
+  displayConfirmModal(true)
+}
+
+const onRemoveRequest = async () => {
+  const path = editingFolderPath.value
+  const requestIndex = editingRequestIndex.value
+
+  if (path === null || requestIndex === null) return
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    path
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  const result = await workspaceService.removeRESTRequest(
+    collHandle,
+    path,
+    requestIndex
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  toast.success(t("state.deleted"))
+  displayConfirmModal(false)
+}
+
+const selectRequest = async (payload: {
+  requestPath: string
+  request: HoppRESTRequest
+}) => {
+  const { requestPath, request } = payload
+
+  const collPath = requestPath.slice(0, -2)
+  const requestIndex = requestPath[requestPath.length - 1]
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collPath
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  const result = await workspaceService.selectRESTRequest(
+    collHandle,
+    collPath,
+    requestIndex,
+    request
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+}
+
+const duplicateRequest = async (payload: {
+  requestPath: string
+  request: HoppRESTRequest
+}) => {
+  const { requestPath, request } = payload
+
+  const collPath = requestPath.slice(0, -2)
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collPath
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  const newRequest = {
+    ...cloneDeep(request),
+    name: `${request.name} - ${t("action.duplicate")}`,
+  }
+
+  const result = await workspaceService.duplicateRESTRequest(
+    collHandle,
+    collPath,
+    newRequest
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  toast.success(t("request.duplicated"))
+}
+
+const editRequest = (payload: {
+  requestPath: string
+  request: HoppRESTRequest
+}) => {
+  const { requestPath, request } = payload
+  const collPath = requestPath.slice(0, -2)
+  const requestIndex = requestPath[requestPath.length - 1]
+
+  editingRequest.value = request
+  editingRequestName.value = request.name ?? ""
+  editingFolderPath.value = collPath
+  editingRequestIndex.value = parseInt(requestIndex)
+
+  displayModalEditRequest(true)
+}
+
+const onEditRequest = async (newReqName: string) => {
+  const collPath = editingFolderPath.value
+  const requestIndex = editingRequestIndex.value
+  const request = editingRequest.value
+
+  if (collPath === null || requestIndex === null || !request) {
+    return
+  }
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collPath
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  const updatedRequest = {
+    ...request,
+    name: newReqName || request.name,
+  }
+
+  const result = await workspaceService.editRESTRequest(
+    collHandle,
+    collPath,
+    requestIndex,
+    updatedRequest
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED
+    return
+  }
+
+  displayModalEditRequest(false)
+  toast.success(t("request.renamed"))
+}
+
 function onImportExportClick() {
   // TODO: Implement
 }
+
+const resolveConfirmModal = (title: string | null) => {
+  if (title === `${t("confirm.remove_collection")}`) {
+    // onRemoveCollection()
+  } else if (title === `${t("confirm.remove_request")}`) {
+    onRemoveRequest()
+  } else if (title === `${t("confirm.remove_folder")}`) {
+    onRemoveFolder()
+  } else {
+    console.error(
+      `Confirm modal title ${title} is not handled by the component`
+    )
+    toast.error(t("error.something_went_wrong"))
+    displayConfirmModal(false)
+  }
+}
+
+const resetSelectedData = () => {
+  editingFolderPath.value = null
+}
+
+/**
+ * Used to get the index of the request from the path
+ * @param path The path of the request
+ * @returns The index of the request
+ */
+const pathToLastIndex = (path: string) => {
+  const pathArr = path.split("/")
+  return parseInt(pathArr[pathArr.length - 1])
+}
 </script>
diff --git a/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionTreeAdapter.ts b/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionTreeAdapter.ts
index fbb8cf8aa..66e36284b 100644
--- a/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionTreeAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionTreeAdapter.ts
@@ -2,7 +2,7 @@ import {
   ChildrenResult,
   SmartTreeAdapter,
 } from "@hoppscotch/ui/dist/src/helpers/treeAdapter"
-import { Ref, computed, ref, watchEffect } from "vue"
+import { Ref, ref, watchEffect } from "vue"
 import { NewWorkspaceService } from "~/services/new-workspace"
 import { HandleRef } from "~/services/new-workspace/handle"
 import {
diff --git a/packages/hoppscotch-common/src/helpers/rest/labelColoring.ts b/packages/hoppscotch-common/src/helpers/rest/labelColoring.ts
index 092b76dc6..a2bbf45a3 100644
--- a/packages/hoppscotch-common/src/helpers/rest/labelColoring.ts
+++ b/packages/hoppscotch-common/src/helpers/rest/labelColoring.ts
@@ -1,13 +1,17 @@
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as RR from "fp-ts/ReadonlyRecord"
+import { HoppRESTRequest } from "@hoppscotch/data"
 
 export const REQUEST_METHOD_LABEL_COLORS = {
-  get: "var(--success-color)",
-  post: "var(--warning-color)",
-  put: "var(--blue-color)",
-  delete: "var(--cl-error-color)",
-  default: "#6b7280",
+  get: "var(--method-get-color)",
+  post: "var(--method-post-color)",
+  put: "var(--method-put-color)",
+  patch: "var(--method-patch-color)",
+  delete: "var(--method-delete-color)",
+  head: "var(--method-head-color)",
+  options: "var(--method-options-color)",
+  default: "var(--method-default-color)",
 } as const
 
 /**
@@ -15,10 +19,18 @@ export const REQUEST_METHOD_LABEL_COLORS = {
  * @param request The HoppRESTRequest object to get the value for
  * @returns The class value for the given HTTP VERB, if not, a generic verb class
  */
-export function getMethodLabelColorClassOf(request: { method: string }) {
+export function getMethodLabelColorClassOf(request: HoppRESTRequest) {
   return pipe(
     REQUEST_METHOD_LABEL_COLORS,
     RR.lookup(request.method.toLowerCase()),
     O.getOrElseW(() => REQUEST_METHOD_LABEL_COLORS.default)
   )
 }
+
+export function getMethodLabelColor(method: string) {
+  return pipe(
+    REQUEST_METHOD_LABEL_COLORS,
+    RR.lookup(method.toLowerCase()),
+    O.getOrElseW(() => REQUEST_METHOD_LABEL_COLORS.default)
+  )
+}
diff --git a/packages/hoppscotch-common/src/index.ts b/packages/hoppscotch-common/src/index.ts
index a4db8641d..3a084c7ea 100644
--- a/packages/hoppscotch-common/src/index.ts
+++ b/packages/hoppscotch-common/src/index.ts
@@ -25,6 +25,9 @@ export function createHoppApp(el: string | Element, platformDef: PlatformDef) {
 
   const app = createApp(App)
 
+  HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app))
+  platformDef.addedHoppModules?.forEach((mod) => mod.onVueAppInit?.(app))
+
   // Some basic work that needs to be done before module inits even
   initBackendGQLClient()
   initializeApp()
@@ -37,9 +40,6 @@ export function createHoppApp(el: string | Element, platformDef: PlatformDef) {
   getService(TestWorkspaceProviderService)
   getService(PersonalWorkspaceProviderService)
 
-  HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app))
-  platformDef.addedHoppModules?.forEach((mod) => mod.onVueAppInit?.(app))
-
   app.mount(el)
 
   console.info(
diff --git a/packages/hoppscotch-common/src/newstore/collections.ts b/packages/hoppscotch-common/src/newstore/collections.ts
index 3c021809a..72afdc029 100644
--- a/packages/hoppscotch-common/src/newstore/collections.ts
+++ b/packages/hoppscotch-common/src/newstore/collections.ts
@@ -319,6 +319,7 @@ const restCollectionDispatchers = defineDispatchers({
       )
       return {}
     }
+
     // We get the index path to the folder itself,
     // we have to find the folder containing the target folder,
     // so we pop the last path index
diff --git a/packages/hoppscotch-common/src/services/new-workspace/index.ts b/packages/hoppscotch-common/src/services/new-workspace/index.ts
index 60331f88a..29e6f006e 100644
--- a/packages/hoppscotch-common/src/services/new-workspace/index.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/index.ts
@@ -13,6 +13,7 @@ import { HandleRef } from "./handle"
 import * as E from "fp-ts/Either"
 import { Workspace, WorkspaceCollection } from "./workspace"
 import { RESTCollectionChildrenView, RootRESTCollectionView } from "./view"
+import { HoppRESTRequest } from "@hoppscotch/data"
 
 export type WorkspaceError<ServiceErr> =
   | { type: "SERVICE_ERROR"; error: ServiceErr }
@@ -172,7 +173,8 @@ export class NewWorkspaceService extends Service {
 
   public async createRESTChildCollection(
     parentCollHandle: HandleRef<WorkspaceCollection>,
-    collectionName: string
+    collectionName: string,
+    path: string
   ): Promise<
     E.Either<
       WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
@@ -193,7 +195,8 @@ export class NewWorkspaceService extends Service {
 
     const result = await provider.createRESTChildCollection(
       parentCollHandle,
-      collectionName
+      collectionName,
+      path
     )
 
     if (E.isLeft(result)) {
@@ -203,6 +206,186 @@ export class NewWorkspaceService extends Service {
     return E.right(result.right)
   }
 
+  public async createRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    requestName: string,
+    path: string
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.createRESTRequest(
+      parentCollHandle,
+      requestName,
+      path
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async removeRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    path: string,
+    requestIndex: number
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.removeRESTRequest(
+      parentCollHandle,
+      path,
+      requestIndex
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async selectRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    requestIndex: string,
+    request: HoppRESTRequest
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.selectRESTRequest(
+      parentCollHandle,
+      collPath,
+      requestIndex,
+      request
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async duplicateRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    request: HoppRESTRequest
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.duplicateRESTRequest(
+      parentCollHandle,
+      collPath,
+      request
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async editRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    requestIndex: number,
+    request: HoppRESTRequest
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.editRESTRequest(
+      parentCollHandle,
+      collPath,
+      requestIndex,
+      request
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+
   public async getRESTCollectionChildrenView(
     collectionHandle: HandleRef<WorkspaceCollection>
   ): Promise<
diff --git a/packages/hoppscotch-common/src/services/new-workspace/provider.ts b/packages/hoppscotch-common/src/services/new-workspace/provider.ts
index 5ad1ad1fc..653626377 100644
--- a/packages/hoppscotch-common/src/services/new-workspace/provider.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/provider.ts
@@ -3,6 +3,7 @@ import * as E from "fp-ts/Either"
 import { HandleRef } from "./handle"
 import { Workspace, WorkspaceCollection, WorkspaceDecor } from "./workspace"
 import { RESTCollectionChildrenView, RootRESTCollectionView } from "./view"
+import { HoppRESTRequest } from "@hoppscotch/data"
 
 export interface WorkspaceProvider {
   providerID: string
@@ -30,6 +31,34 @@ export interface WorkspaceProvider {
   ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
   createRESTChildCollection(
     parentCollHandle: HandleRef<WorkspaceCollection>,
-    collectionName: string
+    collectionName: string,
+    path: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  createRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    requestName: string,
+    path: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  removeRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    path: string,
+    requestIndex: number
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  selectRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    requestIndex: string,
+    request: HoppRESTRequest
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  duplicateRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    request: HoppRESTRequest
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  editRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    requestIndex: number,
+    request: HoppRESTRequest
   ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
 }
diff --git a/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts b/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
index 81353d5b1..37850cd9a 100644
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
@@ -1,18 +1,21 @@
-import {
-  HoppCollection,
-  HoppRESTRequest,
-  makeCollection,
-} from "@hoppscotch/data"
+import { HoppCollection, makeCollection } from "@hoppscotch/data"
 import { Service } from "dioc"
 import * as E from "fp-ts/Either"
-import { get } from "lodash-es"
-import { v4 as uuid } from "uuid"
-import { Ref, computed, markRaw, ref, shallowReactive, shallowRef } from "vue"
+import { Ref, computed, markRaw, nextTick, ref, shallowRef } from "vue"
 
 import PersonalWorkspaceSelector from "~/components/workspace/PersonalWorkspaceSelector.vue"
 import { useStreamStatic } from "~/composables/stream"
 
-import { addRESTCollection, restCollectionStore } from "~/newstore/collections"
+import {
+  addRESTCollection,
+  addRESTFolder,
+  cascadeParentCollectionForHeaderAuth,
+  editRESTRequest,
+  navigateToFolderWithIndexPath,
+  removeRESTRequest,
+  restCollectionStore,
+  saveRESTRequestAs,
+} from "~/newstore/collections"
 import { platform } from "~/platform"
 
 import { HandleRef } from "~/services/new-workspace/handle"
@@ -28,8 +31,15 @@ import {
   WorkspaceDecor,
 } from "~/services/new-workspace/workspace"
 
+import { cloneDeep } from "lodash-es"
+import {
+  getRequestsByPath,
+  resolveSaveContextOnRequestReorder,
+} from "~/helpers/collection/request"
+import { RESTTabService } from "~/services/tab/rest"
 import IconUser from "~icons/lucide/user"
 import { NewWorkspaceService } from ".."
+import { HoppRESTRequest } from "@hoppscotch/data"
 
 export class PersonalWorkspaceProviderService
   extends Service
@@ -40,6 +50,7 @@ export class PersonalWorkspaceProviderService
   public readonly providerID = "PERSONAL_WORKSPACE_PROVIDER"
 
   private workspaceService = this.bind(NewWorkspaceService)
+  private tabs = this.bind(RESTTabService)
 
   public workspaceDecor: Ref<WorkspaceDecor> = ref({
     headerCurrentIcon: IconUser,
@@ -63,77 +74,68 @@ export class PersonalWorkspaceProviderService
     this.workspaceService.registerWorkspaceProvider(this)
   }
 
-  private collectionIDMap = shallowReactive(
-    new WeakMap<HoppCollection, string>()
-  )
-
-  private reqIDMap = shallowReactive(new WeakMap<HoppRESTRequest, string>())
-
-  private collectionIDPathMap = shallowReactive(new Map<string, number[]>())
-
-  private generatedUUIDs = new Set<string>()
-
-  private generateUniqueUUID() {
-    let id = uuid()
-
-    while (this.generatedUUIDs.has(id)) {
-      id = uuid()
-    }
-
-    this.generatedUUIDs.add(id)
-
-    return id
-  }
-
-  private resolvePathFromCollectionID(id: string): number[] | undefined {
-    return this.collectionIDPathMap.get(id)
-  }
-
-  private resolveCollectionFromCollectionID(
-    id: string
-  ): HoppCollection | undefined {
-    const path = this.resolvePathFromCollectionID(id)
-
-    if (path === undefined) return
-
-    const collPath = path.flatMap((x, i) =>
-      i === 0 ? [x.toString()] : ["folders", x.toString()]
-    )
-
-    const coll = get(this.restCollectionState.value.state, collPath) as
-      | HoppCollection
-      | undefined
-
-    return coll
-  }
-
-  private getIssuedInstanceIDForCollection(
-    coll: HoppCollection,
-    location: number[]
+  private navigateToFolderWithIndexPath(
+    collections: HoppCollection[],
+    indexPaths: number[]
   ) {
-    const id = this.collectionIDMap.has(coll)
-      ? this.collectionIDMap.get(coll)!
-      : this.generateUniqueUUID()
+    if (indexPaths.length === 0) return null
 
-    this.collectionIDPathMap.set(id, location)
-    this.collectionIDMap.set(coll, id)
+    let target = collections[indexPaths.shift() as number]
 
-    return id
-  }
+    while (indexPaths.length > 0)
+      target = target?.folders[indexPaths.shift() as number]
 
-  private getIssuedInstanceIDForRequest(req: HoppRESTRequest) {
-    const id = this.reqIDMap.get(req) ?? this.generateUniqueUUID()
-
-    this.reqIDMap.set(req, id)
-
-    return id
+    return target !== undefined ? target : null
   }
 
   public createRESTChildCollection(
     parentCollHandle: HandleRef<WorkspaceCollection>,
-    collectionName: string
+    collectionName: string,
+    path: string
   ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>> {
-    throw new Error("TODO: Method not implemented.")
+    if (
+      parentCollHandle.value.type !== "ok" ||
+      parentCollHandle.value.data.providerID !== this.providerID ||
+      parentCollHandle.value.data.workspaceID !== "personal"
+    ) {
+      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
+    }
+
+    return Promise.resolve(
+      E.right(
+        computed(() => {
+          if (
+            parentCollHandle.value.type !== "ok" ||
+            parentCollHandle.value.data.providerID !== this.providerID ||
+            parentCollHandle.value.data.workspaceID !== "personal"
+          ) {
+            return {
+              type: "invalid" as const,
+              reason: "WORKSPACE_INVALIDATED" as const,
+            }
+          }
+
+          addRESTFolder(collectionName, path)
+
+          platform.analytics?.logEvent({
+            type: "HOPP_CREATE_COLLECTION",
+            workspaceType: "personal",
+            isRootCollection: false,
+            platform: "rest",
+          })
+
+          return {
+            type: "ok",
+            data: {
+              providerID: this.providerID,
+              workspaceID: parentCollHandle.value.data.workspaceID,
+              collectionID: parentCollHandle.value.data.collectionID,
+              name: collectionName,
+            },
+          }
+        })
+      )
+    )
   }
 
   public createRESTRootCollection(
@@ -157,7 +159,7 @@ export class PersonalWorkspaceProviderService
             workspaceHandle.value.data.workspaceID !== "personal"
           ) {
             return {
-              type: "invalid",
+              type: "invalid" as const,
               reason: "WORKSPACE_INVALIDATED" as const,
             }
           }
@@ -196,6 +198,329 @@ export class PersonalWorkspaceProviderService
     )
   }
 
+  public createRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    requestName: string,
+    path: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>> {
+    if (
+      parentCollHandle.value.type !== "ok" ||
+      parentCollHandle.value.data.providerID !== this.providerID ||
+      parentCollHandle.value.data.workspaceID !== "personal"
+    ) {
+      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
+    }
+
+    return Promise.resolve(
+      E.right(
+        computed(() => {
+          if (
+            parentCollHandle.value.type !== "ok" ||
+            parentCollHandle.value.data.providerID !== this.providerID ||
+            parentCollHandle.value.data.workspaceID !== "personal"
+          ) {
+            return {
+              type: "invalid" as const,
+              reason: "WORKSPACE_INVALIDATED" as const,
+            }
+          }
+
+          const newRequest = {
+            ...cloneDeep(this.tabs.currentActiveTab.value.document.request),
+            name: requestName,
+          }
+
+          const insertionIndex = saveRESTRequestAs(path, newRequest)
+
+          const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+            path,
+            "rest"
+          )
+
+          this.tabs.createNewTab({
+            request: newRequest,
+            isDirty: false,
+            saveContext: {
+              originLocation: "user-collection",
+              folderPath: path,
+              requestIndex: insertionIndex,
+            },
+            inheritedProperties: {
+              auth,
+              headers,
+            },
+          })
+
+          platform.analytics?.logEvent({
+            type: "HOPP_SAVE_REQUEST",
+            workspaceType: "personal",
+            createdNow: true,
+            platform: "rest",
+          })
+
+          return {
+            type: "ok",
+            data: {
+              providerID: this.providerID,
+              workspaceID: parentCollHandle.value.data.workspaceID,
+              collectionID: parentCollHandle.value.data.collectionID,
+              name: requestName,
+            },
+          }
+        })
+      )
+    )
+  }
+
+  public removeRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    path: string,
+    requestIndex: number
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>> {
+    if (
+      parentCollHandle.value.type !== "ok" ||
+      parentCollHandle.value.data.providerID !== this.providerID ||
+      parentCollHandle.value.data.workspaceID !== "personal"
+    ) {
+      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
+    }
+
+    return Promise.resolve(
+      E.right(
+        computed(() => {
+          if (
+            parentCollHandle.value.type !== "ok" ||
+            parentCollHandle.value.data.providerID !== this.providerID ||
+            parentCollHandle.value.data.workspaceID !== "personal"
+          ) {
+            return {
+              type: "invalid" as const,
+              reason: "WORKSPACE_INVALIDATED" as const,
+            }
+          }
+
+          const possibleTab = this.tabs.getTabRefWithSaveContext({
+            originLocation: "user-collection",
+            folderPath: path,
+            requestIndex,
+          })
+
+          // If there is a tab attached to this request, dissociate its state and mark it dirty
+          if (possibleTab) {
+            possibleTab.value.document.saveContext = null
+            possibleTab.value.document.isDirty = true
+          }
+
+          console.log(
+            `REST collection store state is `,
+            restCollectionStore.value.state
+          )
+
+          const requestToRemove = navigateToFolderWithIndexPath(
+            restCollectionStore.value.state,
+            path.split("/").map((i) => parseInt(i))
+          )?.requests[requestIndex]
+
+          removeRESTRequest(path, requestIndex, requestToRemove?.id)
+
+          // the same function is used to reorder requests since after removing, it's basically doing reorder
+          resolveSaveContextOnRequestReorder({
+            lastIndex: requestIndex,
+            newIndex: -1,
+            folderPath: path,
+            length: getRequestsByPath(
+              this.restCollectionState.value.state,
+              path
+            ).length,
+          })
+
+          return {
+            type: "ok",
+            data: {
+              providerID: this.providerID,
+              workspaceID: parentCollHandle.value.data.workspaceID,
+              collectionID: parentCollHandle.value.data.workspaceID,
+              name: "" as const,
+            },
+          }
+        })
+      )
+    )
+  }
+
+  public selectRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    requestIndex: string,
+    request: HoppRESTRequest
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>> {
+    if (
+      parentCollHandle.value.type !== "ok" ||
+      parentCollHandle.value.data.providerID !== this.providerID ||
+      parentCollHandle.value.data.workspaceID !== "personal"
+    ) {
+      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
+    }
+
+    return Promise.resolve(
+      E.right(
+        computed(() => {
+          if (
+            parentCollHandle.value.type !== "ok" ||
+            parentCollHandle.value.data.providerID !== this.providerID ||
+            parentCollHandle.value.data.workspaceID !== "personal"
+          ) {
+            return {
+              type: "invalid" as const,
+              reason: "WORKSPACE_INVALIDATED" as const,
+            }
+          }
+
+          // If there is a request with this save context, switch into it
+          let possibleTab = null
+
+          const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+            collPath,
+            "rest"
+          )
+          possibleTab = this.tabs.getTabRefWithSaveContext({
+            originLocation: "user-collection",
+            requestIndex: parseInt(requestIndex),
+            folderPath: collPath!,
+          })
+          if (possibleTab) {
+            this.tabs.setActiveTab(possibleTab.value.id)
+          } else {
+            // If not, open the request in a new tab
+            this.tabs.createNewTab({
+              request: cloneDeep(request),
+              isDirty: false,
+              saveContext: {
+                originLocation: "user-collection",
+                folderPath: collPath!,
+                requestIndex: parseInt(requestIndex),
+              },
+              inheritedProperties: {
+                auth,
+                headers,
+              },
+            })
+          }
+
+          return {
+            type: "ok",
+            data: {
+              providerID: this.providerID,
+              workspaceID: parentCollHandle.value.data.workspaceID,
+              collectionID: parentCollHandle.value.data.workspaceID,
+              name: "",
+            },
+          }
+        })
+      )
+    )
+  }
+
+  public duplicateRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    request: HoppRESTRequest
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>> {
+    if (
+      parentCollHandle.value.type !== "ok" ||
+      parentCollHandle.value.data.providerID !== this.providerID ||
+      parentCollHandle.value.data.workspaceID !== "personal"
+    ) {
+      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
+    }
+
+    return Promise.resolve(
+      E.right(
+        computed(() => {
+          if (
+            parentCollHandle.value.type !== "ok" ||
+            parentCollHandle.value.data.providerID !== this.providerID ||
+            parentCollHandle.value.data.workspaceID !== "personal"
+          ) {
+            return {
+              type: "invalid" as const,
+              reason: "WORKSPACE_INVALIDATED" as const,
+            }
+          }
+
+          saveRESTRequestAs(collPath, request)
+
+          return {
+            type: "ok",
+            data: {
+              providerID: this.providerID,
+              workspaceID: parentCollHandle.value.data.workspaceID,
+              collectionID: parentCollHandle.value.data.workspaceID,
+              name: "",
+            },
+          }
+        })
+      )
+    )
+  }
+
+  public editRESTRequest(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    collPath: string,
+    requestIndex: number,
+    request: HoppRESTRequest
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>> {
+    if (
+      parentCollHandle.value.type !== "ok" ||
+      parentCollHandle.value.data.providerID !== this.providerID ||
+      parentCollHandle.value.data.workspaceID !== "personal"
+    ) {
+      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
+    }
+
+    return Promise.resolve(
+      E.right(
+        computed(() => {
+          if (
+            parentCollHandle.value.type !== "ok" ||
+            parentCollHandle.value.data.providerID !== this.providerID ||
+            parentCollHandle.value.data.workspaceID !== "personal"
+          ) {
+            return {
+              type: "invalid" as const,
+              reason: "WORKSPACE_INVALIDATED" as const,
+            }
+          }
+
+          const possibleActiveTab = this.tabs.getTabRefWithSaveContext({
+            originLocation: "user-collection",
+            requestIndex,
+            collPath,
+          })
+
+          editRESTRequest(collPath, requestIndex, request)
+
+          if (possibleActiveTab) {
+            possibleActiveTab.value.document.request.name = request.name
+            nextTick(() => {
+              possibleActiveTab.value.document.isDirty = false
+            })
+          }
+
+          return {
+            type: "ok",
+            data: {
+              providerID: this.providerID,
+              workspaceID: parentCollHandle.value.data.workspaceID,
+              collectionID: parentCollHandle.value.data.workspaceID,
+              name: "",
+            },
+          }
+        })
+      )
+    )
+  }
+
   public getCollectionHandle(
     workspaceHandle: HandleRef<Workspace>,
     collectionID: string
@@ -224,24 +549,13 @@ export class PersonalWorkspaceProviderService
             }
           }
 
-          // TODO: The way the IDs are issued, this will make it so we need a view
-          // before the ID is issued correctly
-          const coll = this.resolveCollectionFromCollectionID(collectionID)
-
-          if (coll === undefined) {
-            return {
-              type: "invalid",
-              reason: "INVALID_COLL_ID" as const,
-            }
-          }
-
           return {
             type: "ok",
             data: {
               providerID: this.providerID,
               workspaceID: workspaceHandle.value.data.workspaceID,
               collectionID,
-              name: coll.name,
+              name: "" as const,
             },
           }
         })
@@ -279,45 +593,41 @@ export class PersonalWorkspaceProviderService
               mayHaveMoreContent: ref(false),
 
               content: computed(() => {
-                const path = this.resolvePathFromCollectionID(collectionID)
-                const coll =
-                  this.resolveCollectionFromCollectionID(collectionID)
+                const indexPath = collectionID
+                  .split("/")
+                  .map((x) => parseInt(x))
 
-                if (coll === undefined || path === undefined) {
-                  console.warn("Collection against ID was not resolvable")
+                const item = this.navigateToFolderWithIndexPath(
+                  this.restCollectionState.value.state,
+                  indexPath
+                )
 
-                  return []
+                if (item) {
+                  const collections = item.folders.map((childColl, id) => {
+                    return <RESTCollectionViewItem>{
+                      type: "collection",
+                      value: {
+                        collectionID: `${collectionID}/${id}`,
+                        name: childColl.name,
+                      },
+                    }
+                  })
+
+                  const requests = item.requests.map((req, id) => {
+                    return <RESTCollectionViewItem>{
+                      type: "request",
+                      value: {
+                        requestID: `${collectionID}/${id}`,
+                        name: req.name,
+                        method: req.method,
+                        request: req,
+                      },
+                    }
+                  })
+
+                  return [...collections, ...requests]
                 }
-
-                const collections = coll.folders.map((childColl, i) => {
-                  const id = this.getIssuedInstanceIDForCollection(childColl, [
-                    ...path,
-                    i,
-                  ])
-
-                  return <RESTCollectionViewItem>{
-                    type: "collection",
-                    value: {
-                      collectionID: id,
-                      name: coll.name,
-                    },
-                  }
-                })
-
-                const requests = coll.requests.map((req, i) => {
-                  const id = this.getIssuedInstanceIDForRequest(req)
-
-                  return <RESTCollectionViewItem>{
-                    type: "request",
-                    value: {
-                      requestID: id,
-                      name: req.name,
-                      method: req.method,
-                    },
-                  }
-                })
-
-                return [...collections, ...requests]
+                return []
               }),
               loadMore() {
                 return Promise.resolve()
@@ -356,11 +666,9 @@ export class PersonalWorkspaceProviderService
               mayHaveMoreContent: ref(false),
 
               collections: computed(() => {
-                return this.restCollectionState.value.state.map((coll, i) => {
-                  const id = this.getIssuedInstanceIDForCollection(coll, [i])
-
+                return this.restCollectionState.value.state.map((coll, id) => {
                   return {
-                    collectionID: id,
+                    collectionID: id.toString(),
                     name: coll.name,
                   }
                 })
diff --git a/packages/hoppscotch-common/src/services/new-workspace/view.ts b/packages/hoppscotch-common/src/services/new-workspace/view.ts
index e735c0532..fc9c27260 100644
--- a/packages/hoppscotch-common/src/services/new-workspace/view.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/view.ts
@@ -1,3 +1,4 @@
+import { HoppRESTRequest } from "@hoppscotch/data"
 import { Ref } from "vue"
 
 export type RESTCollectionViewCollection = {
@@ -10,6 +11,7 @@ export type RESTCollectionViewRequest = {
 
   name: string
   method: string
+  request: HoppRESTRequest
 }
 
 export type RESTCollectionViewItem =