Merge branch 'main' into feat/short-code

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -91,12 +91,14 @@ export const baseTheme = EditorView.theme({
   ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": {
     color: "var(--accent-contrast-color)",
   },
-  ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+  ".cm-activeLine": { backgroundColor: "transparent" },
   ".cm-searchMatch": {
     outline: "1px solid var(--accent-dark-color)",
+    backgroundColor: "var(--divider-dark-color)",
   },
   ".cm-selectionMatch": {
     outline: "1px solid var(--accent-dark-color)",
+    backgroundColor: "var(--divider-light-color)",
   },
   ".cm-matchingBracket, .cm-nonmatchingBracket": {
     backgroundColor: "var(--divider-color)",
@@ -121,14 +123,18 @@ export const baseTheme = EditorView.theme({
   ".cm-line": {
     paddingLeft: "0.5em",
     paddingRight: "0.5em",
-    color: "var(--secondary-dark-color)",
   },
   ".cm-activeLineGutter": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "transparent",
   },
   ".cm-scroller::-webkit-scrollbar": {
     display: "none",
   },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "var(--divider-light-color)",
+    color: "var(--secondary-dark-color)",
+    borderColor: "var(--divider-dark-color)",
+  },
 })
 
 const editorTypeColor = "var(--editor-type-color)"

packages/hoppscotch-app/helpers/powerSearchNavigation.ts

@@ -15,17 +15,18 @@ export function useArrowKeysNavigation(searchItems: any, options: any = {}) {
     const itemsLength = searchItems.value.length
     const lastItemIndex = itemsLength - 1
     const itemIndexValue = itemIndex.value
-    const action = searchItems.value[itemIndexValue].action
+    const action = searchItems.value[itemIndexValue]?.action
 
     if (action && event.key === "Enter" && options.onEnter) {
       options.onEnter(action)
       return
     }
 
-    if (event.key === "ArrowDown") {
+    if (itemsLength && event.key === "ArrowDown") {
       itemIndex.value = itemIndexValue < lastItemIndex ? itemIndexValue + 1 : 0
     } else if (itemIndexValue === 0) itemIndex.value = lastItemIndex
-    else if (event.key === "ArrowUp") itemIndex.value = itemIndexValue - 1
+    else if (itemsLength && event.key === "ArrowUp")
+      itemIndex.value = itemIndexValue - 1
   }
 
   const preventPropagation = options && options.stopPropagation

packages/hoppscotch-app/helpers/utils/composables.ts

@@ -5,6 +5,7 @@ import {
   readonly,
   Ref,
   ref,
+  useContext,
   watch,
   wrapProperty,
 } from "@nuxtjs/composition-api"
@@ -132,3 +133,15 @@ export function useStreamSubscriber() {
     subscribeToStream: runAndSubscribe,
   }
 }
+
+export function useI18n() {
+  const {
+    app: { i18n },
+  } = useContext()
+  return i18n.t.bind(i18n)
+}
+
+export function useToast() {
+  const { $toast } = useContext()
+  return $toast
+}