Fix find/replace CM styling

src-web/components/DialogContext.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, useContext, useMemo, useState } from 'react';
-import { useHotKey } from '../hooks/useHotKey';
 import { trackEvent } from '../lib/analytics';
 import type { DialogProps } from './core/Dialog';
 import { Dialog } from './core/Dialog';
@@ -60,7 +59,6 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
 function DialogInstance({ id, render, ...props }: DialogEntry) {
   const { actions } = useContext(DialogContext);
   const children = render({ hide: () => actions.hide(id) });
-  useHotKey('popup.close', () => actions.hide(id));
   return (
     <Dialog open onClose={() => actions.hide(id)} {...props}>
       {children}

src-web/components/Sidebar.tsx

@@ -58,7 +58,7 @@ interface TreeNode {
 }
 
 export function Sidebar({ className }: Props) {
-  const { hidden } = useSidebarHidden();
+  const { hidden, show, hide } = useSidebarHidden();
   const sidebarRef = useRef<HTMLLIElement>(null);
   const activeRequest = useActiveRequest();
   const activeEnvironmentId = useActiveEnvironmentId();
@@ -242,8 +242,18 @@ export function Sidebar({ className }: Props) {
   useKeyPressEvent('Backspace', handleDeleteKey);
   useKeyPressEvent('Delete', handleDeleteKey);
 
-  useHotKey('sidebar.focus', () => {
-    if (hidden || hasFocus) return;
+  useHotKey('sidebar.focus', async () => {
+    // Hide the sidebar if it's already focused
+    if (!hidden && hasFocus) {
+      await hide();
+      return;
+    }
+
+    // Show the sidebar if it's hidden
+    if (hidden) {
+      await show();
+    }
+
     // Select 0 index on focus if none selected
     focusActiveRequest(
       selectedTree != null && selectedId != null

src-web/components/core/Dialog.tsx

@@ -36,7 +36,7 @@ export function Dialog({
     [description],
   );
 
-  useHotKey('popup.close', onClose);
+  useHotKey('popup.close', onClose, { enable: open });
 
   return (
     <Overlay open={open} onClose={onClose} portalName="dialog">

src-web/components/core/Dropdown.tsx

@@ -244,13 +244,14 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     }
   };
 
-  useHotKey('popup.close', () => {
-    if (filter !== '') {
-      setFilter('');
-    } else {
-      handleClose();
-    }
-  });
+  useHotKey(
+    'popup.close',
+    () => {
+      if (filter !== '') setFilter('');
+      else handleClose();
+    },
+    { enable: isOpen },
+  );
 
   const handlePrev = useCallback(() => {
     setSelectedIndex((currIndex) => {

src-web/components/core/Editor/Editor.css

@@ -4,11 +4,6 @@
   .cm-editor {
     @apply w-full block text-base;
 
-    * {
-      @apply cursor-text;
-      @apply caret-transparent !important;
-    }
-
     .cm-cursor {
       @apply border-gray-800 !important;
     }
@@ -32,6 +27,11 @@
     .cm-scroller {
       /* Inherit line-height from outside */
       line-height: inherit;
+
+      * {
+        @apply cursor-text;
+        @apply caret-transparent !important;
+      }
     }
 
     /* Don't show selection on blurred input */
@@ -103,10 +103,10 @@
       @apply font-mono text-[0.75rem];
 
       /*
-                   * Round corners or they'll stick out of the editor bounds of editor is rounded.
-                   * Could potentially be pushed up from the editor like we do with bg color but this
-                   * is probably fine.
-                   */
+                         * Round corners or they'll stick out of the editor bounds of editor is rounded.
+                         * Could potentially be pushed up from the editor like we do with bg color but this
+                         * is probably fine.
+                         */
       @apply rounded-lg;
     }
   }
@@ -167,8 +167,8 @@
     @apply h-full flex items-center;
 
     /* Break characters on line wrapping mode, useful for URL field.
-         * We can make this dynamic if we need it to be configurable later
-         */
+             * We can make this dynamic if we need it to be configurable later
+             */
 
     &.cm-lineWrapping {
       @apply break-all;
@@ -272,7 +272,7 @@
 }
 
 .cm-editor .cm-panels {
-  @apply bg-transparent border-0 text-gray-800 z-50;
+  @apply bg-gray-100 p-1 border-0 text-gray-800 z-20 rounded-md;
 
   input,
   button {
@@ -280,11 +280,19 @@
   }
 
   button {
-    @apply appearance-none bg-none bg-gray-800 text-gray-100 focus:bg-gray-900 cursor-default;
+    @apply appearance-none bg-none bg-gray-200 hocus:bg-gray-300 hocus:text-gray-950 border-0 text-gray-800 cursor-default;
+  }
+
+  button[name='close'] {
+    @apply text-gray-600 hocus:text-gray-900 px-2 -mr-1.5 !important;
   }
 
   input {
-    @apply bg-gray-50 border border-highlight focus:border-focus outline-none;
+    @apply bg-gray-50 border border-gray-500/50 focus:border-focus outline-none;
+  }
+
+  label {
+    @apply focus-within:text-gray-950;
   }
 
   /* Hide the "All" button */

src-web/hooks/useHotKey.ts

@@ -63,13 +63,17 @@ export function useHotKey(
   options: Options = {},
 ) {
   useAnyHotkey((hkAction, e) => {
+    // Triggered hotkey!
     if (hkAction === action) {
+      e.preventDefault();
+      e.stopPropagation();
+      console.log('TRIGGERED HOTKEY', hkAction, options);
       callback(e);
     }
   }, options);
 }
 
-export function useAnyHotkey(
+function useAnyHotkey(
   callback: (action: HotkeyAction, e: KeyboardEvent) => void,
   options: Options,
 ) {
@@ -100,9 +104,6 @@ export function useAnyHotkey(
             keys.length === currentKeys.current.size &&
             keys.every((key) => currentKeys.current.has(key))
           ) {
-            // Triggered hotkey!
-            e.preventDefault();
-            e.stopPropagation();
             callbackRef.current(hkAction, e);
           }
         }

src-web/main.tsx

@@ -20,7 +20,7 @@ if (osType !== 'Darwin') {
 const settings = await getSettings();
 setAppearanceOnDocument(settings.appearance as Appearance);
 
-document.addEventListener('keydown', (e) => {
+window.addEventListener('keypress', (e) => {
   // Don't go back in history on backspace
   if (e.key === 'Backspace') e.preventDefault();
 });