feat: context menu for secondary actions in collection, environment and team components - #2005

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -8,6 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -8,6 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -7,6 +7,7 @@
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -8,6 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -8,6 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -7,6 +7,7 @@
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-stretch group">
+    <div
+      class="flex items-stretch group"
+      @contextmenu.prevent="$refs.options.tippy().show()"
+    >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
         @click="toggleShowChildren()"

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-stretch group">
+    <div
+      class="flex items-stretch group"
+      @contextmenu.prevent="$refs.options.tippy().show()"
+    >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
         @click="toggleShowChildren()"

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-stretch group">
+    <div
+      class="flex items-stretch group"
+      @contextmenu.prevent="$refs.options.tippy().show()"
+    >
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
         :class="getRequestLabelColor(request.method)"

packages/hoppscotch-app/components/environments/Environment.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex items-stretch group">
+  <div
+    class="flex items-stretch group"
+    @contextmenu.prevent="$refs.options.tippy().show()"
+  >
     <span
       class="cursor-pointer flex px-4 items-center justify-center"
       @click="$emit('edit-environment')"

packages/hoppscotch-app/components/teams/Team.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="border border-divider rounded flex flex-col flex-1">
+  <div
+    class="border border-divider rounded flex flex-col flex-1"
+    @contextmenu.prevent="!compact ? $refs.options.tippy().show() : null"
+  >
     <div
       class="flex flex-1 items-start"
       :class="