Cmd Palette Improvements (#50)

- Fuzzy matching
- Show hotkeys
- Add actions

src-web/hooks/useCommandPalette.tsx

@@ -9,6 +9,7 @@ export function useCommandPalette() {
       id: 'command_palette',
       size: 'dynamic',
       hideX: true,
+      className: '!max-h-[min(30rem,calc(100vh-4rem))]',
       vAlign: 'top',
       noPadding: true,
       noScroll: true,

src-web/hooks/useCommands.ts

@@ -1,41 +0,0 @@
-import type { UseMutationOptions } from '@tanstack/react-query';
-import { useMutation } from '@tanstack/react-query';
-import { useEffect } from 'react';
-import { createGlobalState } from 'react-use';
-import type { TrackAction, TrackResource } from '../lib/analytics';
-import type { Workspace } from '../lib/models';
-
-interface CommandInstance<T, V> extends UseMutationOptions<V, unknown, T> {
-  track?: [TrackResource, TrackAction];
-  name: string;
-}
-
-export type Commands = {
-  'workspace.create': CommandInstance<Partial<Pick<Workspace, 'name'>>, Workspace>;
-};
-
-const useCommandState = createGlobalState<Commands>();
-
-export function useRegisterCommand<K extends keyof Commands>(action: K, command: Commands[K]) {
-  const [, setState] = useCommandState();
-
-  useEffect(() => {
-    setState((commands) => {
-      return { ...commands, [action]: command };
-    });
-
-    // Remove action when it goes out of scope
-    return () => {
-      setState((commands) => {
-        return { ...commands, [action]: undefined };
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [action]);
-}
-
-export function useCommand<K extends keyof Commands>(action: K) {
-  const [commands] = useCommandState();
-  const cmd = commands[action];
-  return useMutation({ ...cmd });
-}

src-web/hooks/useCreateHttpRequest.ts

@@ -14,7 +14,7 @@ export function useCreateHttpRequest() {
   const routes = useAppRoutes();
 
   return useMutation<HttpRequest, unknown, Partial<HttpRequest>>({
-    mutationFn: (patch) => {
+    mutationFn: (patch = {}) => {
       if (workspaceId === null) {
         throw new Error("Cannot create request when there's no active workspace");
       }
@@ -28,7 +28,6 @@ export function useCreateHttpRequest() {
         }
       }
       patch.folderId = patch.folderId || activeRequest?.folderId;
-      console.log('PATCH', patch);
       return invoke('cmd_create_http_request', { request: { workspaceId, ...patch } });
     },
     onSettled: () => trackEvent('http_request', 'create'),

src-web/hooks/useCreateWorkspace.ts

@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api/core';
+import type { Workspace } from '../lib/models';
+import { useAppRoutes } from './useAppRoutes';
+import { usePrompt } from './usePrompt';
+
+export function useCreateWorkspace() {
+  const routes = useAppRoutes();
+  const prompt = usePrompt();
+  return useMutation<Workspace, void, void>({
+    mutationFn: async () => {
+      const name = await prompt({
+        id: 'new-workspace',
+        name: 'name',
+        label: 'Name',
+        defaultValue: 'My Workspace',
+        title: 'New Workspace',
+        confirmLabel: 'Create',
+        placeholder: 'My Workspace',
+      });
+      return invoke('cmd_create_workspace', { name });
+    },
+    onSuccess: async (workspace) => {
+      routes.navigate('workspace', { workspaceId: workspace.id });
+    },
+  });
+}

src-web/hooks/useGlobalCommands.ts

@@ -1,31 +0,0 @@
-import { invoke } from '@tauri-apps/api/core';
-import { useAppRoutes } from './useAppRoutes';
-import { useRegisterCommand } from './useCommands';
-import { usePrompt } from './usePrompt';
-
-export function useGlobalCommands() {
-  const prompt = usePrompt();
-  const routes = useAppRoutes();
-
-  useRegisterCommand('workspace.create', {
-    name: 'New Workspace',
-    track: ['workspace', 'create'],
-    onSuccess: async (workspace) => {
-      routes.navigate('workspace', { workspaceId: workspace.id });
-    },
-    mutationFn: async ({ name: patchName }) => {
-      const name =
-        patchName ??
-        (await prompt({
-          id: 'new-workspace',
-          name: 'name',
-          label: 'Name',
-          defaultValue: 'My Workspace',
-          title: 'New Workspace',
-          confirmLabel: 'Create',
-          placeholder: 'My Workspace',
-        }));
-      return invoke('cmd_create_workspace', { name });
-    },
-  });
-}