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/assets/scss/styles.scss

@@ -497,6 +497,22 @@ pre.ace_editor {
   }
 }
 
+.cm-panel.cm-search [name="close"] {
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply min-h-5;
+  @apply min-w-5;
+  @apply bg-primaryDark #{!important};
+  @apply sticky #{!important};
+  @apply right-0 #{!important};
+  @apply ml-auto #{!important};
+  @apply my-auto #{!important};
+  @apply rounded #{!important};
+  @apply outline #{!important};
+  @apply outline-divider #{!important};
+}
+
 .shortcut-key {
   @apply inline-flex;
   @apply font-sans;

packages/hoppscotch-common/assets/scss/themes.scss

@@ -8,6 +8,7 @@
   --upper-primary-sticky-fold: 4.125rem;
   --upper-secondary-sticky-fold: 6.188rem;
   --upper-tertiary-sticky-fold: 8.25rem;
+  --upper-fourth-sticky-fold: 10.2rem;
   --upper-mobile-primary-sticky-fold: 6.625rem;
   --upper-mobile-secondary-sticky-fold: 8.688rem;
   --upper-mobile-sticky-fold: 10.75rem;
@@ -15,6 +16,7 @@
   --lower-primary-sticky-fold: 3rem;
   --lower-secondary-sticky-fold: 5.063rem;
   --lower-tertiary-sticky-fold: 7.125rem;
+  --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
 }
 

packages/hoppscotch-common/src/components.d.ts

@@ -144,6 +144,7 @@ declare module 'vue' {
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']

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 { from, to } = selection
-    const to = selection.to
     if (from === to) return
     const text = view.value?.state.doc.sliceString(from, to)
     const { top, left } = view.value?.coordsAtPos(from)

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -219,8 +219,8 @@ export function useCodemirror(
   function handleTextSelection() {
     const selection = view.value?.state.selection.main
     if (selection) {
-      const from = selection.from
+      const { from, to } = selection
-      const to = selection.to
+      if (from === to) return
       const text = view.value?.state.doc.sliceString(from, to)
       const { top, left } = view.value?.coordsAtPos(from)
       if (text) {

packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts

@@ -63,6 +63,7 @@ export const baseTheme = EditorView.theme({
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
+    zIndex: "1",
   },
   ".cm-panels.cm-panels-top": {
     borderBottom: "1px solid var(--divider-light-color)",
@@ -74,25 +75,34 @@ export const baseTheme = EditorView.theme({
     display: "flex",
     alignItems: "center",
     flexWrap: "nowrap",
-    flexShrink: 0,
+    flexShrink: "0",
     overflow: "auto",
+    padding: "0.25rem 0.5rem !important",
   },
   ".cm-search label": {
     display: "inline-flex",
     alignItems: "center",
   },
   ".cm-textfield": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-color)",
     color: "var(--secondary-dark-color)",
     borderColor: "var(--divider-light-color)",
     borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
   },
   ".cm-button": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-color)",
-    color: "var(--secondary-dark-color)",
+    color: "var(--secondary-light-color)",
     backgroundImage: "none",
-    border: "none",
     borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    textTransform: "capitalize",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
   },
   ".cm-completionLabel": {
     color: "var(--secondary-color)",
@@ -107,10 +117,10 @@ export const baseTheme = EditorView.theme({
     color: "var(--tooltip-color)",
   },
   ".cm-tooltip-arrow:after": {
-    borderTopColor: "inherit !important",
+    borderTopColor: "currentColor !important",
   },
   ".cm-tooltip-arrow:before": {
-    borderTopColor: "inherit !important",
+    borderTopColor: "currentColor !important",
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul": {
     fontFamily: "var(--font-mono)",
@@ -155,8 +165,8 @@ export const baseTheme = EditorView.theme({
     textAlign: "center",
   },
   ".cm-line": {
-    paddingLeft: "0.5em",
+    paddingLeft: "0.5rem",
-    paddingRight: "0.5em",
+    paddingRight: "0.5rem",
   },
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",
@@ -183,6 +193,7 @@ export const inputTheme = EditorView.theme({
     fontFamily: "var(--font-sans)",
     color: "var(--secondary-dark-color)",
     backgroundColor: "transparent",
+    height: "100%",
   },
   ".cm-cursor": {
     borderColor: "var(--secondary-color)",
@@ -198,6 +209,7 @@ export const inputTheme = EditorView.theme({
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
+    zIndex: "1",
   },
   ".cm-panels.cm-panels-top": {
     borderBottom: "1px solid var(--divider-light-color)",
@@ -209,25 +221,34 @@ export const inputTheme = EditorView.theme({
     display: "flex",
     alignItems: "center",
     flexWrap: "nowrap",
-    flexShrink: 0,
+    flexShrink: "0",
     overflow: "auto",
+    padding: "0.25rem 0.5rem !important",
   },
   ".cm-search label": {
     display: "inline-flex",
     alignItems: "center",
   },
   ".cm-textfield": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-color)",
     color: "var(--secondary-dark-color)",
     borderColor: "var(--divider-light-color)",
     borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
   },
   ".cm-button": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-color)",
-    color: "var(--secondary-dark-color)",
+    color: "var(--secondary-light-color)",
     backgroundImage: "none",
-    border: "none",
     borderRadius: "4px",
+    fontSize: "var(--font-size-tiny)",
+    fontWeight: "600",
+    textTransform: "capitalize",
+    flexShrink: "0",
+    border: "1px solid var(--divider-color)",
   },
   ".cm-completionLabel": {
     color: "var(--secondary-color)",
@@ -290,10 +311,11 @@ export const inputTheme = EditorView.theme({
     textAlign: "center",
   },
   ".cm-line": {
+    lineHeight: "1rem",
     paddingLeft: "1rem",
     paddingRight: "1rem",
-    paddingTop: "0.2rem",
+    paddingTop: "0.25rem",
-    paddingBottom: "0.2rem",
+    paddingBottom: "0.25rem",
   },
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",

packages/hoppscotch-common/src/pages/realtime/socketio.vue

@@ -106,6 +106,7 @@
           <RealtimeCommunication
             :show-event-field="true"
             :is-connected="connectionState === 'CONNECTED'"
+            class="cmResponseSecondaryStickyFold"
             event-field-styles="top-upperSecondaryStickyFold"
             sticky-header-styles="top-upperTertiaryStickyFold"
             @send-message="sendMessage($event)"

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -46,6 +46,7 @@
         >
           <RealtimeCommunication
             :is-connected="connectionState === 'CONNECTED'"
+            class="cmResponsePrimaryStickyFold"
             sticky-header-styles="top-upperSecondaryStickyFold"
             @send-message="sendMessage($event)"
           />

packages/hoppscotch-common/windi.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
         upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
         upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
         upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        upperFourthStickyFold: "var(--upper-fourth-sticky-fold)",
         upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
         upperMobileSecondaryStickyFold:
           "var(--upper-mobile-secondary-sticky-fold)",
@@ -22,6 +23,7 @@ export default defineConfig({
         lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
         lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
         lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
+        lowerFourthStickyFold: "var(--lower-fourth-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
         sidebarSecondaryStickyFold: "var(--line-height-body)",
       },

packages/hoppscotch-sh-admin/src/components/teams/Add.vue

@@ -10,7 +10,7 @@
         <div class="flex flex-col relaive">
           <label for="teamName" class="py-2"> {{ t('teams.email') }} </label>
           <HoppSmartAutoComplete
-            styles="w-full p-2 bg-transparent border border-divider rounded-md "
+            styles="w-full p-2 bg-transparent border border-divider rounded-md"
             class="flex-1 !flex"
             :source="allUsersEmail"
             :spellcheck="true"