refactor: update share request flow (#3805)

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

@@ -7,7 +7,7 @@
       v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
       class="flex items-center justify-center flex-1 min-w-0 py-2 cursor-pointer pointer-events-auto"
       :title="`${timeStamp}`"
-      @click="openInNewTab"
+      @click="customizeSharedRequest()"
     >
       <span
         class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
@@ -128,7 +128,6 @@ const emit = defineEmits<{
     embedProperties?: string | null
   ): void
   (e: "delete-shared-request", codeID: string): void
-  (e: "open-new-tab", request: HoppRESTRequest): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -145,10 +144,6 @@ const requestLabelColor = computed(() =>
   getMethodLabelColorClassOf(parseRequest.value)
 )
 
-const openInNewTab = () => {
-  emit("open-new-tab", parseRequest.value)
-}
-
 const customizeSharedRequest = () => {
   const embedProperties = props.request.properties
   emit(

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

@@ -9,8 +9,14 @@
       />
     </div>
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-end overflow-x-auto border-b border-dividerLight bg-primary"
+      class="sticky top-sidebarPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
+      <HoppButtonSecondary
+        :label="t('action.new')"
+        :icon="IconPlus"
+        class="!rounded-none"
+        @click="shareRequest()"
+      />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         to="https://docs.hoppscotch.io/documentation/features/widgets"
@@ -47,7 +53,6 @@
           :request="request"
           @customize-shared-request="customizeSharedRequest"
           @delete-shared-request="deleteSharedRequest"
-          @open-new-tab="openInNewTab"
         />
         <HoppSmartIntersection
           v-if="hasMoreSharedRequests"
@@ -70,7 +75,15 @@
         :alt="`${t('empty.shared_requests')}`"
         :text="t('empty.shared_requests')"
         @drop.stop
-      />
+      >
+        <template #body>
+          <HoppButtonPrimary
+            :label="t('add.new')"
+            :icon="IconPlus"
+            @click="shareRequest()"
+          />
+        </template>
+      </HoppSmartPlaceholder>
     </div>
   </div>
   <HoppSmartConfirmModal
@@ -95,6 +108,7 @@
 
 <script lang="ts" setup>
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconPlus from "~icons/lucide/plus"
 import { useI18n } from "~/composables/i18n"
 import ShortcodeListAdapter from "~/helpers/shortcode/ShortcodeListAdapter"
 import { useReadonlyStream } from "~/composables/stream"
@@ -270,6 +284,17 @@ onAuthEvent((ev) => {
   }
 })
 
+const shareRequest = () => {
+  if (currentUser.value) {
+    const tab = restTab.currentActiveTab
+    invokeAction("share.request", {
+      request: tab.value.document.request,
+    })
+  } else {
+    invokeAction("modals.login.toggle")
+  }
+}
+
 const deleteSharedRequest = (codeID: string) => {
   if (currentUser.value) {
     sharedRequestID.value = codeID
@@ -434,13 +459,6 @@ const copySharedRequest = (payload: {
   }
 }
 
-const openInNewTab = (request: HoppRESTRequest) => {
-  restTab.createNewTab({
-    isDirty: false,
-    request,
-  })
-}
-
 const resolveConfirmModal = (title: string | null) => {
   if (title === `${t("confirm.remove_shared_request")}`) onDeleteSharedRequest()
   else {