Better padding

src-tauri/src/analytics.rs

@@ -1,6 +1,6 @@
 use std::fmt::Display;
 
-use log::{debug, warn};
+use log::{warn};
 use serde::{Deserialize, Serialize};
 use serde_json::json;
 use sqlx::types::JsonValue;
@@ -182,7 +182,7 @@ pub async fn track_event(
 
     // Disable analytics actual sending in dev
     if is_dev() {
-        debug!("track: {} {} {:?}", event, attributes_json, params);
+        // debug!("track: {} {} {:?}", event, attributes_json, params);
         return;
     }
 

src-tauri/src/http.rs

@@ -259,7 +259,6 @@ pub async fn send_http_request(
                     return response_err(response, e, window).await;
                 }
             }
-            
         } else if body_type == "multipart/form-data" && request_body.contains_key("form") {
             let mut multipart_form = multipart::Form::new();
             if let Some(form_definition) = request_body.get("form") {
@@ -269,12 +268,13 @@ pub async fn send_http_request(
                         .unwrap_or(empty_bool)
                         .as_bool()
                         .unwrap_or(false);
-                    let name = p
+                    let name_raw = p
                         .get("name")
                         .unwrap_or(empty_string)
                         .as_str()
                         .unwrap_or_default();
-                    if !enabled || name.is_empty() {
+
+                    if !enabled || name_raw.is_empty() {
                         continue;
                     }
 
@@ -283,24 +283,40 @@ pub async fn send_http_request(
                         .unwrap_or(empty_string)
                         .as_str()
                         .unwrap_or_default();
-                    let value = p
+                    let value_raw = p
                         .get("value")
                         .unwrap_or(empty_string)
                         .as_str()
                         .unwrap_or_default();
-                    multipart_form = multipart_form.part(
-                        render::render(name, &workspace, environment_ref),
-                        match !file.is_empty() {
-                            true => {
-                                multipart::Part::bytes(fs::read(file).map_err(|e| e.to_string())?)
+
+                    let name = render::render(name_raw, &workspace, environment_ref);
+                    let part = if file.is_empty() {
+                        multipart::Part::text(render::render(
+                            value_raw,
+                            &workspace,
+                            environment_ref,
+                        ))
+                    } else {
+                        match fs::read(file) {
+                            Ok(f) => multipart::Part::bytes(f),
+                            Err(e) => {
+                                return response_err(response, e.to_string(), window).await;
                             }
-                            false => multipart::Part::text(render::render(
-                                value,
-                                &workspace,
-                                environment_ref,
-                            )),
-                        },
-                    );
+                        }
+                    };
+
+                    let ct_raw = p
+                        .get("contentType")
+                        .unwrap_or(empty_string)
+                        .as_str()
+                        .unwrap_or_default();
+
+                    multipart_form = multipart_form.part(name, if ct_raw.is_empty() {
+                        part
+                    } else {
+                        let ct = render::render(ct_raw, &workspace, environment_ref);
+                        part.mime_str(ct.as_str()).map_err(|e| e.to_string())?
+                    });
                 }
             }
             headers.remove("Content-Type"); // reqwest will add this automatically

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Yaak",
-    "version": "2024.3.5"
+    "version": "2024.3.6"
   },
   "tauri": {
     "windows": [],

src-web/components/AppRouter.tsx

@@ -1,10 +1,9 @@
-import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
+import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
-import { DialogProvider } from './DialogContext';
-import { GlobalHooks } from './GlobalHooks';
+import { DefaultLayout } from './DefaultLayout';
+import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 import RouteError from './RouteError';
 import Workspace from './Workspace';
-import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 
 const router = createBrowserRouter([
   {
@@ -58,7 +57,7 @@ function RedirectLegacyEnvironmentURLs() {
   }>();
   const environmentId = rawEnvironmentId === '__default__' ? undefined : rawEnvironmentId;
 
-  let to = '/';
+  let to;
   if (workspaceId != null && requestId != null) {
     to = routes.paths.request({ workspaceId, environmentId, requestId });
   } else if (workspaceId != null) {
@@ -69,12 +68,3 @@ function RedirectLegacyEnvironmentURLs() {
 
   return <Navigate to={to} />;
 }
-
-function DefaultLayout() {
-  return (
-    <DialogProvider>
-      <Outlet />
-      <GlobalHooks />
-    </DialogProvider>
-  );
-}

src-web/components/DefaultLayout.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom';
+import { DialogProvider } from './DialogContext';
+import { GlobalHooks } from './GlobalHooks';
+
+export function DefaultLayout() {
+  return (
+    <DialogProvider>
+      <Outlet />
+      <GlobalHooks />
+    </DialogProvider>
+  );
+}

src-web/components/EnvironmentEditDialog.tsx

@@ -5,6 +5,7 @@ import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useDeleteEnvironment } from '../hooks/useDeleteEnvironment';
 import { useEnvironments } from '../hooks/useEnvironments';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { usePrompt } from '../hooks/usePrompt';
 import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
@@ -59,14 +60,16 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
             <SidebarButton
               active={selectedEnvironment?.id == null}
               onClick={() => setSelectedEnvironmentId(null)}
-              className="group"
               environment={null}
               rightSlot={
                 <IconButton
                   size="sm"
+                  iconSize="md"
+                  color="custom"
                   title="Add sub environment"
                   icon="plusCircle"
                   iconClassName="text-gray-500 group-hover:text-gray-700"
+                  className="group"
                   onClick={handleCreateEnvironment}
                 />
               }
@@ -113,6 +116,11 @@ const EnvironmentEditor = function ({
   workspace: Workspace;
   className?: string;
 }) {
+  const valueVisibility = useKeyValue<boolean>({
+    namespace: 'global',
+    key: 'environmentValueVisibility',
+    fallback: true,
+  });
   const environments = useEnvironments();
   const updateEnvironment = useUpdateEnvironment(environment?.id ?? null);
   const updateWorkspace = useUpdateWorkspace(workspace.id);
@@ -164,15 +172,26 @@ const EnvironmentEditor = function ({
   return (
     <VStack space={4} className={classNames(className, 'pl-4')}>
       <HStack space={2} className="justify-between">
-        <Heading className="w-full flex items-center">
+        <Heading className="w-full flex items-center gap-1">
           <div>{environment?.name ?? 'Global Variables'}</div>
+          <IconButton
+            iconClassName="text-gray-600"
+            size="sm"
+            icon={valueVisibility.value ? 'eye' : 'eyeClosed'}
+            title={valueVisibility.value ? 'Hide Values' : 'Reveal Values'}
+            onClick={() => {
+              return valueVisibility.set((v) => !v);
+            }}
+          />
         </Heading>
       </HStack>
       <PairEditor
+        className="pr-2"
         nameAutocomplete={nameAutocomplete}
         nameAutocompleteVariables={false}
         namePlaceholder="VAR_NAME"
         nameValidate={validateName}
+        valueType={valueVisibility.value ? 'text' : 'password'}
         valueAutocompleteVariables={false}
         forceUpdateKey={environment?.id ?? workspace?.id ?? 'n/a'}
         pairs={variables}
@@ -216,8 +235,8 @@ function SidebarButton({
       <div
         className={classNames(
           className,
-          'w-full grid grid-cols-[minmax(0,1fr)_auto] items-center',
-          'px-1', // Padding to show focus border
+          'w-full grid grid-cols-[minmax(0,1fr)_auto] items-center gap-0.5',
+          'px-2', // Padding to show focus border
         )}
       >
         <Button
@@ -225,7 +244,7 @@ function SidebarButton({
           size="xs"
           className={classNames(
             'w-full',
-            active ? 'text-gray-800' : 'text-gray-600 hover:text-gray-700',
+            active ? 'text-gray-800 bg-highlightSecondary' : 'text-gray-600 hover:text-gray-700',
           )}
           justify="start"
           onClick={onClick}

src-web/components/FormMultipartEditor.tsx

@@ -16,6 +16,7 @@ export function FormMultipartEditor({ body, forceUpdateKey, onChange }: Props) {
         enabled: p.enabled,
         name: p.name,
         value: p.file ?? p.value,
+        contentType: p.contentType,
         isFile: !!p.file,
       })),
     [body.form],
@@ -27,6 +28,7 @@ export function FormMultipartEditor({ body, forceUpdateKey, onChange }: Props) {
         form: pairs.map((p) => ({
           enabled: p.enabled,
           name: p.name,
+          contentType: p.contentType,
           file: p.isFile ? p.value : undefined,
           value: p.isFile ? undefined : p.value,
         })),

src-web/components/GlobalHooks.tsx

@@ -3,6 +3,7 @@ import { appWindow } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
+import { useGlobalCommands } from '../hooks/useGlobalCommands';
 import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
 import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
 import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests';
@@ -32,8 +33,8 @@ export function GlobalHooks() {
   useRecentRequests();
 
   useSyncAppearance();
-
   useSyncWindowTitle();
+  useGlobalCommands();
 
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);

src-web/components/GrpcConnectionSetupPane.tsx

@@ -195,7 +195,6 @@ export function GrpcConnectionSetupPane({
               shortLabel: o.label,
             }))}
             extraItems={[
-              { type: 'separator' },
               {
                 label: 'Refresh',
                 type: 'default',

src-web/components/RedirectToLatestWorkspace.tsx

@@ -3,17 +3,18 @@ import { useNavigate } from 'react-router-dom';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { getRecentRequests } from '../hooks/useRecentRequests';
-import { getRecentWorkspaces } from '../hooks/useRecentWorkspaces';
+import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 
 export function RedirectToLatestWorkspace() {
   const navigate = useNavigate();
   const routes = useAppRoutes();
   const workspaces = useWorkspaces();
+  const recentWorkspaces = useRecentWorkspaces();
 
   useEffect(() => {
     (async function () {
-      const workspaceId = (await getRecentWorkspaces())[0] ?? workspaces[0]?.id ?? 'n/a';
+      const workspaceId = recentWorkspaces[0] ?? workspaces[0]?.id ?? 'n/a';
       const environmentId = (await getRecentEnvironments(workspaceId))[0];
       const requestId = (await getRecentRequests(workspaceId))[0];
 
@@ -23,7 +24,7 @@ export function RedirectToLatestWorkspace() {
         navigate(routes.paths.workspace({ workspaceId, environmentId }));
       }
     })();
-  }, [navigate, routes.paths, workspaces, workspaces.length]);
+  }, [navigate, recentWorkspaces, routes.paths, workspaces, workspaces.length]);
 
   return <></>;
 }

src-web/components/Sidebar.tsx

@@ -419,6 +419,19 @@ export function Sidebar({ className }: Props) {
     ],
   );
 
+  const [showMainContextMenu, setShowMainContextMenu] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handleMainContextMenu = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowMainContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const mainContextMenuItems = useCreateDropdownItems();
+
   // Not ready to render yet
   if (tree == null || collapsed.value == null) {
     return null;
@@ -431,11 +444,17 @@ export function Sidebar({ className }: Props) {
       onFocus={handleFocus}
       onBlur={handleBlur}
       tabIndex={hidden ? -1 : 0}
+      onContextMenu={handleMainContextMenu}
       className={classNames(
         className,
         'h-full pb-3 overflow-y-scroll overflow-x-visible hide-scrollbars pt-2',
       )}
     >
+      <ContextMenu
+        show={showMainContextMenu}
+        items={mainContextMenuItems}
+        onClose={() => setShowMainContextMenu(null)}
+      />
       <SidebarItems
         treeParentMap={treeParentMap}
         selectedId={selectedId}

src-web/components/WorkspaceActionsDropdown.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { memo, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
+import { useCommand } from '../hooks/useCommands';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
 import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
@@ -30,7 +30,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const activeWorkspaceId = activeWorkspace?.id ?? null;
   const updateWorkspace = useUpdateWorkspace(activeWorkspaceId);
   const deleteWorkspace = useDeleteWorkspace(activeWorkspace);
-  const createWorkspace = useCreateWorkspace({ navigateAfter: true });
+  const createWorkspace = useCommand('workspace.create');
   const dialog = useDialog();
   const prompt = usePrompt();
   const routes = useAppRoutes();

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

@@ -9,7 +9,6 @@ import {
   cloneElement,
   forwardRef,
   isValidElement,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -57,7 +56,7 @@ export interface EditorProps {
   actions?: ReactNode;
 }
 
-const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
+export const Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   {
     readOnly,
     type = 'text',
@@ -295,8 +294,6 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   );
 });
 
-export const Editor = memo(_Editor);
-
 function getExtensions({
   container,
   readOnly,

src-web/components/core/Input.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { useStateSyncDefault } from '../../hooks/useStateSyncDefault';
 import type { EditorProps } from './Editor';
 import { Editor } from './Editor';
 import { IconButton } from './IconButton';
@@ -69,7 +70,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
   }: InputProps,
   ref,
 ) {
-  const [obscured, setObscured] = useState(type === 'password');
+  const [obscured, setObscured] = useStateSyncDefault(type === 'password');
   const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
   const [focused, setFocused] = useState(false);
 
@@ -181,9 +182,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
           <IconButton
             title={obscured ? `Show ${label}` : `Obscure ${label}`}
             size="xs"
-            className="mr-0.5"
+            className="mr-0.5 group/obscure !h-auto my-0.5"
+            iconClassName="text-gray-500 group-hover/obscure:text-gray-800"
             iconSize="sm"
-            icon={obscured ? 'eyeClosed' : 'eye'}
+            icon={obscured ? 'eye' : 'eyeClosed'}
             onClick={() => setObscured((o) => !o)}
           />
         )}

src-web/components/core/PairEditor.tsx

@@ -5,6 +5,7 @@ import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } fro
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { v4 as uuid } from 'uuid';
+import { usePrompt } from '../../hooks/usePrompt';
 import { DropMarker } from '../DropMarker';
 import { Button } from './Button';
 import { Checkbox } from './Checkbox';
@@ -14,6 +15,7 @@ import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 import type { InputProps } from './Input';
 import { Input } from './Input';
+import { RadioDropdown } from './RadioDropdown';
 
 export type PairEditorProps = {
   pairs: Pair[];
@@ -22,6 +24,7 @@ export type PairEditorProps = {
   className?: string;
   namePlaceholder?: string;
   valuePlaceholder?: string;
+  valueType?: 'text' | 'password';
   nameAutocomplete?: GenericCompletionConfig;
   valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
   nameAutocompleteVariables?: boolean;
@@ -36,6 +39,7 @@ export type Pair = {
   enabled?: boolean;
   name: string;
   value: string;
+  contentType?: string;
   isFile?: boolean;
 };
 
@@ -51,6 +55,7 @@ export const PairEditor = memo(function PairEditor({
   nameAutocompleteVariables,
   namePlaceholder,
   nameValidate,
+  valueType,
   onChange,
   pairs: originalPairs,
   valueAutocomplete,
@@ -176,6 +181,7 @@ export const PairEditor = memo(function PairEditor({
               allowFileValues={allowFileValues}
               nameAutocompleteVariables={nameAutocompleteVariables}
               valueAutocompleteVariables={valueAutocompleteVariables}
+              valueType={valueType}
               forceFocusPairId={forceFocusPairId}
               forceUpdateKey={forceUpdateKey}
               nameAutocomplete={nameAutocomplete}
@@ -218,6 +224,7 @@ type FormRowProps = {
   | 'valueAutocomplete'
   | 'nameAutocompleteVariables'
   | 'valueAutocompleteVariables'
+  | 'valueType'
   | 'namePlaceholder'
   | 'valuePlaceholder'
   | 'nameValidate'
@@ -246,9 +253,11 @@ const FormRow = memo(function FormRow({
   valueAutocompleteVariables,
   valuePlaceholder,
   valueValidate,
+  valueType,
 }: FormRowProps) {
   const { id } = pairContainer;
   const ref = useRef<HTMLDivElement>(null);
+  const prompt = usePrompt();
   const nameInputRef = useRef<EditorView>(null);
 
   useEffect(() => {
@@ -278,6 +287,11 @@ const FormRow = memo(function FormRow({
     [onChange, id, pairContainer.pair],
   );
 
+  const handleChangeValueContentType = useMemo(
+    () => (contentType: string) => onChange({ id, pair: { ...pairContainer.pair, contentType } }),
+    [onChange, id, pairContainer.pair],
+  );
+
   const handleFocus = useCallback(() => onFocus?.(pairContainer), [onFocus, pairContainer]);
   const handleDelete = useCallback(
     () => onDelete?.(pairContainer, false),
@@ -397,39 +411,73 @@ const FormRow = memo(function FormRow({
               name="value"
               onChange={handleChangeValueText}
               onFocus={handleFocus}
+              type={isLast ? 'text' : valueType}
               placeholder={valuePlaceholder ?? 'value'}
               autocomplete={valueAutocomplete?.(pairContainer.pair.name)}
               autocompleteVariables={valueAutocompleteVariables}
             />
           )}
-          {allowFileValues && (
-            <Dropdown
-              items={[
-                { key: 'text', label: 'Text', onSelect: () => handleChangeValueText('') },
-                { key: 'file', label: 'File', onSelect: () => handleChangeValueFile('') },
-              ]}
-            >
-              <IconButton
-                iconSize="sm"
-                size="xs"
-                icon={isLast ? 'empty' : 'chevronDown'}
-                title="Select form data type"
-              />
-            </Dropdown>
-          )}
         </div>
       </div>
-      <IconButton
-        aria-hidden={isLast}
-        disabled={isLast}
-        color="custom"
-        icon={!isLast ? 'trash' : 'empty'}
-        size="sm"
-        iconSize="sm"
-        title="Delete header"
-        onClick={!isLast ? handleDelete : undefined}
-        className="ml-0.5 opacity-0 group-hover:!opacity-100 focus-visible:!opacity-100"
-      />
+      {allowFileValues ? (
+        <RadioDropdown
+          value={pairContainer.pair.isFile ? 'file' : 'text'}
+          onChange={(v) => {
+            if (v === 'file') handleChangeValueFile('');
+            else handleChangeValueText('');
+          }}
+          items={[
+            { label: 'Text', value: 'text' },
+            { label: 'File', value: 'file' },
+          ]}
+          extraItems={[
+            {
+              key: 'mime',
+              label: 'Set Content-Type',
+              leftSlot: <Icon icon="pencil" />,
+              onSelect: async () => {
+                const v = await prompt({
+                  id: 'content-type',
+                  require: false,
+                  title: 'Override Content-Type',
+                  label: 'Content-Type',
+                  placeholder: 'text/plain',
+                  defaultValue: pairContainer.pair.contentType ?? '',
+                  name: 'content-type',
+                  confirmLabel: 'Set',
+                  description: 'Leave blank to auto-detect',
+                });
+                handleChangeValueContentType(v);
+              },
+            },
+            {
+              key: 'delete',
+              label: 'Delete',
+              onSelect: handleDelete,
+              variant: 'danger',
+              leftSlot: <Icon icon="trash" />,
+            },
+          ]}
+        >
+          <IconButton
+            iconSize="sm"
+            size="xs"
+            icon={isLast ? 'empty' : 'chevronDown'}
+            title="Select form data type"
+          />
+        </RadioDropdown>
+      ) : (
+        <Dropdown
+          items={[{ key: 'delete', label: 'Delete', onSelect: handleDelete, variant: 'danger' }]}
+        >
+          <IconButton
+            iconSize="sm"
+            size="xs"
+            icon={isLast ? 'empty' : 'chevronDown'}
+            title="Select form data type"
+          />
+        </Dropdown>
+      )}
     </div>
   );
 });

src-web/components/core/RadioDropdown.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import type { DropdownItemSeparator, DropdownProps } from './Dropdown';
+import type { DropdownItem, DropdownItemSeparator, DropdownProps } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import { Icon } from './Icon';
 
@@ -42,7 +42,7 @@ export function RadioDropdown<T = string | null>({
           };
         }
       }),
-      ...(extraItems ?? []),
+      ...((extraItems ? [{ type: 'separator' }, ...extraItems] : []) as DropdownItem[]),
     ],
     [items, extraItems, value, onChange],
   );

src-web/hooks/Prompt.tsx

@@ -12,6 +12,7 @@ export interface PromptProps {
   name: InputProps['name'];
   defaultValue: InputProps['defaultValue'];
   placeholder: InputProps['placeholder'];
+  require?: InputProps['require'];
   confirmLabel?: string;
 }
 
@@ -22,6 +23,7 @@ export function Prompt({
   defaultValue,
   placeholder,
   onResult,
+  require = true,
   confirmLabel = 'Save',
 }: PromptProps) {
   const [value, setValue] = useState<string>(defaultValue ?? '');
@@ -41,7 +43,7 @@ export function Prompt({
     >
       <Input
         hideLabel
-        require
+        require={require}
         autoSelect
         placeholder={placeholder}
         label={label}

src-web/hooks/useCommands.ts

@@ -0,0 +1,41 @@
+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/useGlobalCommands.ts

@@ -1,14 +1,18 @@
-import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import { trackEvent } from '../lib/analytics';
-import type { Workspace } from '../lib/models';
 import { useAppRoutes } from './useAppRoutes';
+import { useRegisterCommand } from './useCommands';
 import { usePrompt } from './usePrompt';
 
-export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }) {
-  const routes = useAppRoutes();
+export function useGlobalCommands() {
   const prompt = usePrompt();
-  return useMutation<Workspace, unknown, Partial<Pick<Workspace, 'name'>>>({
+  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 ??
@@ -23,11 +27,5 @@ export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }
         }));
       return invoke('cmd_create_workspace', { name });
     },
-    onSettled: () => trackEvent('workspace', 'create'),
-    onSuccess: async (workspace) => {
-      if (navigateAfter) {
-        routes.navigate('workspace', { workspaceId: workspace.id });
-      }
-    },
   });
 }

src-web/hooks/usePrompt.ts

@@ -14,6 +14,7 @@ export function usePrompt() {
     defaultValue,
     placeholder,
     confirmLabel,
+    require,
   }: Pick<DialogProps, 'title' | 'description'> &
     Omit<PromptProps, 'onResult' | 'onHide'> & { id: string }) =>
     new Promise((onResult: PromptProps['onResult']) => {
@@ -24,7 +25,16 @@ export function usePrompt() {
         hideX: true,
         size: 'sm',
         render: ({ hide }) =>
-          Prompt({ onHide: hide, onResult, name, label, defaultValue, placeholder, confirmLabel }),
+          Prompt({
+            onHide: hide,
+            onResult,
+            name,
+            label,
+            defaultValue,
+            placeholder,
+            confirmLabel,
+            require,
+          }),
       });
     });
 }

src-web/hooks/useStateSyncDefault.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Like useState, except it will update the value when the default value changes
+ */
+export function useStateSyncDefault<T>(defaultValue: T) {
+  const [value, setValue] = useState(defaultValue);
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  return [value, setValue] as const;
+}

src-web/lib/analytics.ts

@@ -1,35 +1,38 @@
 import { invoke } from '@tauri-apps/api';
 
-export function trackEvent(
-  resource:
-    | 'app'
-    | 'cookie_jar'
-    | 'dialog'
-    | 'environment'
-    | 'folder'
-    | 'grpc_connection'
-    | 'grpc_event'
-    | 'grpc_request'
-    | 'http_request'
-    | 'http_response'
-    | 'key_value'
-    | 'setting'
-    | 'sidebar'
-    | 'workspace',
-  action:
-    | 'cancel'
-    | 'commit'
-    | 'create'
-    | 'delete'
-    | 'delete_many'
-    | 'duplicate'
-    | 'hide'
-    | 'launch'
-    | 'send'
-    | 'show'
-    | 'toggle'
-    | 'update',
+export type TrackResource =
+  | 'app'
+  | 'cookie_jar'
+  | 'dialog'
+  | 'environment'
+  | 'folder'
+  | 'grpc_connection'
+  | 'grpc_event'
+  | 'grpc_request'
+  | 'http_request'
+  | 'http_response'
+  | 'key_value'
+  | 'setting'
+  | 'sidebar'
+  | 'workspace';
 
+export type TrackAction =
+  | 'cancel'
+  | 'commit'
+  | 'create'
+  | 'delete'
+  | 'delete_many'
+  | 'duplicate'
+  | 'hide'
+  | 'launch'
+  | 'send'
+  | 'show'
+  | 'toggle'
+  | 'update';
+
+export function trackEvent(
+  resource: TrackResource,
+  action: TrackAction,
   attributes: Record<string, string | number> = {},
 ) {
   invoke('cmd_track_event', {

src-web/main.css

@@ -16,8 +16,9 @@
     font-variant-ligatures: none;
   }
 
-  ::selection {
-    @apply bg-selection;
+  ::selection,
+  .cm-selectionBackground {
+    @apply bg-selection !important;
   }
 
   /* Disable user selection to make it more "app-like" */