Add command palette (#46)

This PR finished the initial PoC command palette. It currently only
supports switching between requests and workspaces, but can easily be
extended for more.

src-web/components/core/Dialog.tsx

@@ -18,6 +18,7 @@ export interface DialogProps {
   hideX?: boolean;
   noPadding?: boolean;
   noScroll?: boolean;
+  vAlign?: 'top' | 'center';
 }
 
 export function Dialog({
@@ -31,6 +32,7 @@ export function Dialog({
   hideX,
   noPadding,
   noScroll,
+  vAlign = 'center',
 }: DialogProps) {
   const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
   const descriptionId = useMemo(
@@ -50,7 +52,13 @@ export function Dialog({
 
   return (
     <Overlay open={open} onClose={onClose} portalName="dialog">
-      <div className="x-theme-dialog absolute inset-0 flex items-center justify-center pointer-events-none">
+      <div
+        className={classNames(
+          'x-theme-dialog absolute inset-0 flex flex-col items-center pointer-events-none my-5',
+          vAlign === 'top' && 'justify-start',
+          vAlign === 'center' && 'justify-center',
+        )}
+      >
         <div
           role="dialog"
           aria-labelledby={titleId}
@@ -71,7 +79,7 @@ export function Dialog({
               size === 'md' && 'w-[45rem] max-h-[80vh]',
               size === 'lg' && 'w-[65rem] max-h-[80vh]',
               size === 'full' && 'w-[100vw] h-[100vh]',
-              size === 'dynamic' && 'min-w-[30vw] max-w-[80vw]',
+              size === 'dynamic' && 'min-w-[20rem] max-w-[80vw] max-h-[80vh]',
             )}
           >
             {title ? (

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

@@ -332,6 +332,20 @@ function getExtensions({
 
   return [
     ...baseExtensions, // Must be first
+    EditorView.domEventHandlers({
+      focus: () => {
+        onFocus.current?.();
+      },
+      blur: () => {
+        onBlur.current?.();
+      },
+      keydown: (e) => {
+        onKeyDown.current?.(e);
+      },
+      paste: (e) => {
+        onPaste.current?.(e.clipboardData?.getData('text/plain') ?? '');
+      },
+    }),
     tooltips({ parent }),
     keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
     ...(singleLine ? [singleLineExt()] : []),
@@ -349,21 +363,6 @@ function getExtensions({
         onChange.current?.(update.state.doc.toString());
       }
     }),
-
-    EditorView.domEventHandlers({
-      focus: () => {
-        onFocus.current?.();
-      },
-      blur: () => {
-        onBlur.current?.();
-      },
-      keydown: (e) => {
-        onKeyDown.current?.(e);
-      },
-      paste: (e) => {
-        onPaste.current?.(e.clipboardData?.getData('text/plain') ?? '');
-      },
-    }),
   ];
 }
 

src-web/components/core/PlainInput.tsx

@@ -6,7 +6,7 @@ import type { InputProps } from './Input';
 import { HStack } from './Stacks';
 
 export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type'> & {
-  type: 'text' | 'password' | 'number';
+  type?: 'text' | 'password' | 'number';
   step?: number;
 };
 
@@ -54,7 +54,7 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
   const inputClassName = classNames(
     className,
     '!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder',
-    'px-1.5 text-xs font-mono',
+    'px-1.5 text-xs font-mono cursor-text',
   );
 
   const isValid = useMemo(() => {