Start of command palette

src-web/components/CommandPalette.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+import { useRequests } from '../hooks/useRequests';
+import { useWorkspaces } from '../hooks/useWorkspaces';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
+import { Input } from './core/Input';
+
+export function CommandPalette() {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const workspaces = useWorkspaces();
+  const requests = useRequests();
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      setSelectedIndex((prev) => prev + 1);
+    } else if (e.key === 'ArrowUp') {
+      setSelectedIndex((prev) => prev - 1);
+    }
+  }, []);
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+      <div className="px-2 py-2 w-full">
+        <Input
+          hideLabel
+          name="command"
+          label="Command"
+          placeholder="Type a command"
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+      <div className="h-full px-1.5 overflow-y-auto">
+        {requests.map((r, i) => (
+          <CommandPaletteItem active={i === selectedIndex} key={r.id}>
+            Switch Request → {fallbackRequestName(r)}
+          </CommandPaletteItem>
+        ))}
+        {workspaces.map((w, i) => (
+          <CommandPaletteItem active={i === selectedIndex} key={w.id}>
+            Switch Workspace → {w.name}
+          </CommandPaletteItem>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CommandPaletteItem({ children, active }: { children: ReactNode; active: boolean }) {
+  return (
+    <div
+      className={classNames(
+        'h-xs flex items-center rounded px-1.5 text-gray-600',
+        active && 'bg-highlightSecondary text-gray-800',
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src-web/components/DialogContext.tsx

@@ -6,7 +6,7 @@ import { Dialog } from './core/Dialog';
 type DialogEntry = {
   id: string;
   render: ({ hide }: { hide: () => void }) => React.ReactNode;
-} & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className' | 'size' | 'noPadding'>;
+} & Omit<DialogProps, 'onClose' | 'open' | 'children'>;
 
 interface State {
   dialogs: DialogEntry[];

src-web/components/GlobalHooks.tsx

@@ -2,6 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { appWindow } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useCommandPalette } from '../hooks/useCommandPalette';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
 import { useGlobalCommands } from '../hooks/useGlobalCommands';
 import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
@@ -35,6 +36,7 @@ export function GlobalHooks() {
   useSyncAppearance();
   useSyncWindowTitle();
   useGlobalCommands();
+  useCommandPalette();
 
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);

src-web/components/GrpcConnectionSetupPane.tsx

@@ -122,7 +122,7 @@ export function GrpcConnectionSetupPane({
   const handleSend = useCallback(async () => {
     if (activeRequest == null) return;
     onSend({ message: activeRequest.message });
-  }, [activeRequest, onGo]);
+  }, [activeRequest, onSend]);
 
   const tabs: TabItem[] = useMemo(
     () => [

src-web/components/RecentRequestsDropdown.tsx

@@ -1,14 +1,13 @@
 import classNames from 'classnames';
 import { useMemo, useRef } from 'react';
-import { useKey, useKeyPressEvent } from 'react-use';
+import { useKeyPressEvent } from 'react-use';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
-import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useRecentRequests } from '../hooks/useRecentRequests';
+import { useRequests } from '../hooks/useRequests';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
@@ -21,20 +20,10 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
   const activeRequest = useActiveRequest();
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeEnvironment = useActiveEnvironment();
-  const httpRequests = useHttpRequests();
-  const grpcRequests = useGrpcRequests();
   const routes = useAppRoutes();
   const allRecentRequestIds = useRecentRequests();
   const recentRequestIds = useMemo(() => allRecentRequestIds.slice(1), [allRecentRequestIds]);
-  const requests = useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
-
-  // Toggle the menu on Cmd+k
-  useKey('k', (e) => {
-    if (e.metaKey) {
-      e.preventDefault();
-      dropdownRef.current?.toggle();
-    }
-  });
+  const requests = useRequests();
 
   // Handle key-up
   useKeyPressEvent('Control', undefined, () => {
@@ -42,16 +31,20 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
     dropdownRef.current?.select?.();
   });
 
-  useHotKey('requestSwitcher.prev', () => {
+  useHotKey('request_switcher.prev', () => {
     if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
     dropdownRef.current?.next?.();
   });
 
-  useHotKey('requestSwitcher.next', () => {
+  useHotKey('request_switcher.next', () => {
     if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
     dropdownRef.current?.prev?.();
   });
 
+  useHotKey('request_switcher.toggle', () => {
+    dropdownRef.current?.toggle();
+  });
+
   const items = useMemo<DropdownItem[]>(() => {
     if (activeWorkspaceId === null) return [];
 

src-web/components/RedirectToLatestWorkspace.tsx

@@ -13,6 +13,11 @@ export function RedirectToLatestWorkspace() {
   const recentWorkspaces = useRecentWorkspaces();
 
   useEffect(() => {
+    if (workspaces.length === 0) {
+      console.log('No workspaces found to redirect to. Skipping.');
+      return;
+    }
+
     (async function () {
       const workspaceId = recentWorkspaces[0] ?? workspaces[0]?.id ?? 'n/a';
       const environmentId = (await getRecentEnvironments(workspaceId))[0];

src-web/components/RequestPane.tsx

@@ -61,6 +61,25 @@ export const RequestPane = memo(function RequestPane({
   const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
   const contentType = useContentTypeFromHeaders(activeRequest.headers);
 
+  const handleContentTypeChange = useCallback(
+    async (contentType: string | null) => {
+      const headers = activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type');
+
+      if (contentType != null) {
+        headers.push({
+          name: 'Content-Type',
+          value: contentType,
+          enabled: true,
+        });
+      }
+      await updateRequest.mutateAsync({ headers });
+
+      // Force update header editor so any changed headers are reflected
+      setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
+    },
+    [activeRequest.headers, updateRequest],
+  );
+
   const tabs: TabItem[] = useMemo(
     () => [
       {
@@ -153,7 +172,15 @@ export const RequestPane = memo(function RequestPane({
         },
       },
     ],
-    [activeRequest, updateRequest],
+    [
+      activeRequest.authentication,
+      activeRequest.authenticationType,
+      activeRequest.bodyType,
+      activeRequest.headers,
+      activeRequest.urlParameters,
+      handleContentTypeChange,
+      updateRequest,
+    ],
   );
 
   const handleBodyChange = useCallback(
@@ -161,24 +188,6 @@ export const RequestPane = memo(function RequestPane({
     [updateRequest],
   );
 
-  const handleContentTypeChange = useCallback(
-    async (contentType: string | null) => {
-      const headers = activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type');
-
-      if (contentType != null) {
-        headers.push({
-          name: 'Content-Type',
-          value: contentType,
-          enabled: true,
-        });
-      }
-      await updateRequest.mutateAsync({ headers });
-
-      // Force update header editor so any changed headers are reflected
-      setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
-    },
-    [activeRequest.headers, updateRequest],
-  );
   const handleBinaryFileChange = useCallback(
     (body: HttpRequest['body']) => {
       updateRequest.mutate({ body });

src-web/components/core/Dialog.tsx

@@ -17,6 +17,7 @@ export interface DialogProps {
   size?: 'sm' | 'md' | 'lg' | 'full' | 'dynamic';
   hideX?: boolean;
   noPadding?: boolean;
+  noScroll?: boolean;
 }
 
 export function Dialog({
@@ -29,6 +30,7 @@ export function Dialog({
   description,
   hideX,
   noPadding,
+  noScroll,
 }: DialogProps) {
   const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
   const descriptionId = useMemo(
@@ -60,7 +62,7 @@ export function Dialog({
             animate={{ top: 0, scale: 1 }}
             className={classNames(
               className,
-              'grid grid-rows-[auto_minmax(0,1fr)]',
+              'h-full grid grid-rows-[auto_auto_minmax(0,1fr)]',
               'relative bg-gray-50 pointer-events-auto',
               'rounded-lg',
               'dark:border border-highlight shadow shadow-black/10',
@@ -79,15 +81,20 @@ export function Dialog({
             ) : (
               <span />
             )}
-            {description && (
+
+            {description ? (
               <p className="px-6 text-gray-700" id={descriptionId}>
                 {description}
               </p>
+            ) : (
+              <span />
             )}
+
             <div
               className={classNames(
-                'h-full w-full grid grid-cols-[minmax(0,1fr)] overflow-y-auto',
+                'h-full w-full grid grid-cols-[minmax(0,1fr)]',
                 !noPadding && 'px-6 py-2',
+                !noScroll && 'overflow-y-auto',
               )}
             >
               {children}