fix: sticky searchbar hidden in codemirror (#3351)

* fix: sticky search bar in codemirror

* chore: use tailwind classes

* chore: improve consistency across editor instances

---------

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

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -211,3 +211,9 @@ defineActionHandler("request.open-tab", ({ tab }) => {
   selectedOptionTab.value = tab as GQLOptionTabs
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperPrimaryStickyFold #{!important};
+}
+</style>

packages/hoppscotch-common/src/components/graphql/Response.vue

@@ -139,3 +139,9 @@ defineActionHandler(
   computed(() => !!props.response && props.response.length > 0)
 )
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-sidebarPrimaryStickyFold #{!important};
+}
+</style>

packages/hoppscotch-common/src/components/graphql/Sidebar.vue

@@ -396,3 +396,9 @@ const copySchema = () => {
   copySchemaIcon.value = IconCheck
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-sidebarPrimaryStickyFold #{!important};
+}
+</style>

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

@@ -528,3 +528,9 @@ const getInspectorResult = (results: InspectorResult[], index: number) => {
   })
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>

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

@@ -430,3 +430,9 @@ const getInspectorResult = (results: InspectorResult[], index: number) => {
   })
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>

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

@@ -110,3 +110,9 @@ const clearContent = () => {
   preRequestScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>

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

@@ -205,3 +205,9 @@ const prettifyXML = (xml: string) => {
   })
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperFourthStickyFold #{!important};
+}
+</style>

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

@@ -106,3 +106,9 @@ const clearContent = () => {
   testScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+</style>

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

@@ -424,3 +424,9 @@ const clearContent = () => {
   bulkUrlEncodedParams.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperFourthStickyFold #{!important};
+}
+</style>

packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -86,7 +86,11 @@
         />
       </div>
     </div>
-    <div ref="jsonResponse" class="flex flex-col flex-1 h-auto h-full"></div>
+    <div
+      ref="jsonResponse"
+      class="flex flex-col flex-1 h-auto h-full"
+      :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
+    ></div>
     <div
       v-if="outlinePath"
       class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
@@ -381,4 +385,12 @@ defineActionHandler("response.copy", () => copyResponse())
   @apply transition;
   @apply hover: text-secondary;
 }
+
+:deep(.responseToggleOff .cm-panels) {
+  @apply top-lowerTertiaryStickyFold #{!important};
+}
+
+:deep(.responseToggleOn .cm-panels) {
+  @apply top-lowerFourthStickyFold #{!important};
+}
 </style>

packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue

@@ -117,3 +117,9 @@ useCodemirror(
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-lowerTertiaryStickyFold #{!important};
+}
+</style>

packages/hoppscotch-common/src/components/realtime/Communication.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div
+    class="flex flex-col flex-1"
+    :class="{ eventFeildShown: showEventField }"
+  >
     <div
       v-if="showEventField"
       class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
@@ -271,3 +274,17 @@ const prettifyRequestBody = () => {
 
 defineActionHandler("request.send-cancel", sendMessage)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-upperSecondaryStickyFold #{!important};
+}
+.eventFeildShown :deep(.cm-panels),
+.cmResponsePrimaryStickyFold :deep(.cm-panels) {
+  @apply top-upperTertiaryStickyFold #{!important};
+}
+
+.cmResponseSecondaryStickyFold :deep(.cm-panels) {
+  @apply top-upperFourthStickyFold #{!important};
+}
+</style>

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -152,6 +152,22 @@ const updateModelValue = (value: string) => {
   })
 }
 
+// close the context menu when the input is empty
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (!newVal) {
+      invokeAction("contextmenu.open", {
+        position: {
+          top: 0,
+          left: 0,
+        },
+        text: null,
+      })
+    }
+  }
+)
+
 const handleKeystroke = (ev: KeyboardEvent) => {
   if (["ArrowDown", "ArrowUp", "Enter", "Tab", "Escape"].includes(ev.key)) {
     ev.preventDefault()
@@ -314,8 +330,7 @@ const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 function handleTextSelection() {
   const selection = view.value?.state.selection.main
   if (selection) {
-    const from = selection.from
-    const to = selection.to
+    const { from, to } = selection
     if (from === to) return
     const text = view.value?.state.doc.sliceString(from, to)
     const { top, left } = view.value?.coordsAtPos(from)