feat: tippy menu for history and tab (#3220)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

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

@@ -221,6 +221,7 @@
       v-if="showSaveRequestModal"
       mode="rest"
       :show="showSaveRequestModal"
+      :request="request"
       @hide-modal="showSaveRequestModal = false"
     />
   </div>
@@ -263,6 +264,7 @@ import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
 import { getCurrentStrategyID } from "~/helpers/network"
+import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 
 const t = useI18n()
 
@@ -578,6 +580,8 @@ const saveRequest = () => {
   }
 }
 
+const request = ref<HoppRESTRequest | null>(null)
+
 onBeforeUnmount(() => {
   if (loading.value) cancelRequest()
 })
@@ -593,7 +597,22 @@ defineActionHandler("request.method.prev", cycleUpMethod)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler(
   "request.save-as",
-  () => (showSaveRequestModal.value = true)
+  (
+    req:
+      | {
+          requestType: "rest"
+          request: HoppRESTRequest
+        }
+      | {
+          requestType: "gql"
+          request: HoppGQLRequest
+        }
+  ) => {
+    showSaveRequestModal.value = true
+    if (req && req.requestType === "rest") {
+      request.value = req.request
+    }
+  }
 )
 defineActionHandler("request.method.get", () => updateMethod("GET"))
 defineActionHandler("request.method.post", () => updateMethod("POST"))

packages/hoppscotch-common/src/components/http/TabHead.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+    :title="tab.document.request.name"
+    class="truncate px-2 flex items-center"
+    @dblclick="emit('open-rename-modal')"
+    @contextmenu.prevent="options?.tippy.show()"
+    @click.middle="emit('close-tab')"
+  >
+    <span
+      class="font-semibold text-tiny"
+      :class="getMethodLabelColorClassOf(tab.document.request)"
+    >
+      {{ tab.document.request.method }}
+    </span>
+
+    <tippy
+      ref="options"
+      trigger="manual"
+      interactive
+      theme="popover"
+      :on-shown="() => tippyActions!.focus()"
+    >
+      <span class="leading-8 px-2">
+        {{ tab.document.request.name }}
+      </span>
+      <template #content="{ hide }">
+        <div
+          ref="tippyActions"
+          class="flex flex-col focus:outline-none"
+          tabindex="0"
+          @keyup.r="renameAction?.$el.click()"
+          @keyup.d="duplicateAction?.$el.click()"
+          @keyup.w="closeAction?.$el.click()"
+          @keyup.x="closeOthersAction?.$el.click()"
+          @keyup.escape="hide()"
+        >
+          <HoppSmartItem
+            ref="renameAction"
+            :icon="IconFileEdit"
+            :label="t('request.rename')"
+            :shortcut="['R']"
+            @click="
+              () => {
+                emit('open-rename-modal')
+                hide()
+              }
+            "
+          />
+          <HoppSmartItem
+            ref="duplicateAction"
+            :icon="IconCopy"
+            :label="t('tab.duplicate')"
+            :shortcut="['D']"
+            @click="
+              () => {
+                emit('duplicate-tab')
+                hide()
+              }
+            "
+          />
+          <HoppSmartItem
+            v-if="isRemovable"
+            ref="closeAction"
+            :icon="IconXCircle"
+            :label="t('tab.close')"
+            :shortcut="['W']"
+            @click="
+              () => {
+                emit('close-tab')
+                hide()
+              }
+            "
+          />
+          <HoppSmartItem
+            v-if="isRemovable"
+            ref="closeOthersAction"
+            :icon="IconXSquare"
+            :label="t('tab.close_others')"
+            :shortcut="['X']"
+            @click="
+              () => {
+                emit('close-other-tabs')
+                hide()
+              }
+            "
+          />
+        </div>
+      </template>
+    </tippy>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { TippyComponent } from "vue-tippy"
+import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
+import { useI18n } from "~/composables/i18n"
+import { HoppRESTTab } from "~/helpers/rest/tab"
+import IconXCircle from "~icons/lucide/x-circle"
+import IconXSquare from "~icons/lucide/x-square"
+import IconFileEdit from "~icons/lucide/file-edit"
+import IconCopy from "~icons/lucide/copy"
+
+const t = useI18n()
+
+defineProps<{
+  tab: HoppRESTTab
+  isRemovable: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: "open-rename-modal"): void
+  (event: "close-tab"): void
+  (event: "close-other-tabs"): void
+  (event: "duplicate-tab"): void
+}>()
+
+const tippyActions = ref<TippyComponent | null>(null)
+const options = ref<TippyComponent | null>(null)
+
+const renameAction = ref<HTMLButtonElement | null>(null)
+const closeAction = ref<HTMLButtonElement | null>(null)
+const closeOthersAction = ref<HTMLButtonElement | null>(null)
+const duplicateAction = ref<HTMLButtonElement | null>(null)
+</script>