feat: context menu (#3180)

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

packages/hoppscotch-common/src/services/context-menu/menu/environment.menu.ts

@@ -0,0 +1,56 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from "../"
+import { markRaw, ref } from "vue"
+import { invokeAction } from "~/helpers/actions"
+import IconPlusCircle from "~icons/lucide/plus-circle"
+import { getI18n } from "~/modules/i18n"
+
+/**
+ * This menu returns a single result that allows the user
+ * to add the selected text as an environment variable
+ * This menus is shown on all text selections
+ */
+export class EnvironmentMenuService extends Service implements ContextMenu {
+  public static readonly ID = "ENVIRONMENT_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "environment"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+    results.value = [
+      {
+        id: "environment",
+        text: {
+          type: "text",
+          text: this.t("context_menu.set_environment_variable"),
+        },
+        icon: markRaw(IconPlusCircle),
+        action: () => {
+          invokeAction("modals.environment.add", {
+            envName: "test",
+            variableName: text,
+          })
+        },
+      },
+    ]
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+    return resultObj
+  }
+}