Confirmation Dialogs

src-web/components/App.tsx

@@ -20,6 +20,7 @@ import { DEFAULT_FONT_SIZE } from '../lib/constants';
 import { extractKeyValue, getKeyValue, setKeyValue } from '../lib/keyValueStore';
 import type { HttpRequest, HttpResponse, KeyValue, Workspace } from '../lib/models';
 import { AppRouter } from './AppRouter';
+import { DialogProvider } from './DialogContext';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -172,8 +173,10 @@ export function App() {
       <MotionConfig transition={{ duration: 0.1 }}>
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>
-            <AppRouter />
+            <DialogProvider>
-            <ReactQueryDevtools initialIsOpen={false} />
+              <AppRouter />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </DialogProvider>
           </DndProvider>
         </HelmetProvider>
       </MotionConfig>

src-web/components/DialogContext.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import type { DialogProps } from './core/Dialog';
+import { Dialog } from './core/Dialog';
+
+type DialogEntry = {
+  id: string;
+  render: ({ hide }: { hide: () => void }) => React.ReactNode;
+} & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className'>;
+
+type DialogEntryOptionalId = Omit<DialogEntry, 'id'> & { id?: string };
+
+interface State {
+  dialogs: DialogEntry[];
+  actions: Actions;
+}
+
+interface Actions {
+  show: (d: DialogEntryOptionalId) => void;
+  hide: (id: string) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const DialogContext = createContext<State>({} as any);
+
+export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
+  const [dialogs, setDialogs] = useState<State['dialogs']>([]);
+  const actions = useMemo<Actions>(
+    () => ({
+      show: ({ id: oid, ...props }: DialogEntryOptionalId) => {
+        const id = oid ?? Math.random().toString(36).slice(2);
+        setDialogs((a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
+      },
+      hide: (id: string) => {
+        setDialogs((a) => a.filter((d) => d.id !== id));
+      },
+    }),
+    [],
+  );
+
+  const state: State = {
+    dialogs,
+    actions,
+  };
+
+  return (
+    <DialogContext.Provider value={state}>
+      {children}
+      {dialogs.map(({ id, render, ...props }) => (
+        <Dialog open key={id} onClose={() => actions.hide(id)} {...props}>
+          {render({ hide: () => actions.hide(id) })}
+        </Dialog>
+      ))}
+    </DialogContext.Provider>
+  );
+};
+
+export const useDialog = () => useContext(DialogContext).actions;

src-web/components/ParameterEditor.tsx

@@ -7,5 +7,5 @@ type Props = {
 };
 
 export function ParametersEditor({ parameters, onChange }: Props) {
-  return <PairEditor pairs={parameters} onChange={onChange} namePlaceholder="param_name" />;
+  return <PairEditor pairs={parameters} onChange={onChange} namePlaceholder="name" />;
 }

src-web/components/RequestPane.tsx

@@ -66,7 +66,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
           ],
         },
       },
-      { value: 'params', label: 'Params' },
+      { value: 'params', label: 'URL Params' },
       { value: 'headers', label: 'Headers' },
       { value: 'auth', label: 'Auth' },
     ],

src-web/components/Sidebar.tsx

@@ -1,15 +1,16 @@
+import { dialog } from '@tauri-apps/api';
 import classnames from 'classnames';
 import type { ForwardedRef, KeyboardEvent } from 'react';
 import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useConfirm } from '../hooks/useConfirm';
 import { useRequests } from '../hooks/useRequests';
 import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './core/Button';
-import { Dialog } from './core/Dialog';
 import { IconButton } from './core/IconButton';
 import { HStack, VStack } from './core/Stacks';
 import { DropMarker } from './DropMarker';
@@ -28,12 +29,12 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
   const sidebarRef = useRef<HTMLDivElement>(null);
   const unorderedRequests = useRequests();
   const activeRequest = useActiveRequest();
+  const confirm = useConfirm();
   const requests = useMemo(
     () => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority),
     [unorderedRequests],
   );
 
-  const [open, setOpen] = useState<boolean>(false);
   return (
     <div className="relative h-full">
       <div
@@ -48,10 +49,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
           <SidebarItems activeRequestId={activeRequest?.id} requests={requests} />
         </VStack>
         <HStack className="mx-1 pb-1" alignItems="center" justifyContent="end">
-          <Dialog open={open} onOpenChange={setOpen} title={'Cool Thing'}>
+          <IconButton
-            Hello?
+            title=""
-          </Dialog>
+            icon="magicWand"
-          <IconButton title="" icon="magicWand" onClick={() => setOpen(true)} />
+            onClick={() =>
+              confirm({ title: 'Reset Requests', description: 'Do you want to do it?' })
+            }
+          />
           <ToggleThemeButton />
         </HStack>
       </div>

src-web/components/Workspace.tsx

@@ -31,6 +31,7 @@ export default function Workspace() {
     null,
   );
 
+  // float/un-float sidebar on window resize
   useEffect(() => {
     if (windowSize.width <= WINDOW_FLOATING_SIDEBAR_WIDTH) {
       setFloating(true);

src-web/components/WorkspaceDropdown.tsx

@@ -34,15 +34,6 @@ export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }:
 
     return [
       ...workspaceItems,
-      {
-        type: 'separator',
-        label: activeWorkspace?.name,
-      },
-      {
-        label: 'Delete',
-        leftSlot: <Icon icon="trash" />,
-        onSelect: () => deleteWorkspace.mutate(),
-      },
       {
         type: 'separator',
         label: 'Actions',
@@ -52,6 +43,11 @@ export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }:
         leftSlot: <Icon icon="plus" />,
         onSelect: () => createWorkspace.mutate({ name: 'New Workspace' }),
       },
+      {
+        label: 'Delete Workspace',
+        leftSlot: <Icon icon="trash" />,
+        onSelect: () => deleteWorkspace.mutate(),
+      },
     ];
   }, [workspaces, activeWorkspaceId]);
 

src-web/components/core/Button.tsx

@@ -7,7 +7,7 @@ import { Icon } from './Icon';
 const colorStyles = {
   custom: '',
   default: 'text-gray-700 enabled:hover:bg-gray-700/10 enabled:hover:text-gray-1000',
-  gray: 'text-gray-800 bg-gray-100 enabled:hover:bg-gray-500/20 enabled:hover:text-gray-1000',
+  gray: 'text-gray-800 bg-highlight enabled:hover:bg-gray-500/20 enabled:hover:text-gray-1000',
   primary: 'bg-blue-400 text-white hover:bg-blue-500',
   secondary: 'bg-violet-400 text-white hover:bg-violet-500',
   warning: 'bg-orange-400 text-white hover:bg-orange-500',

src-web/components/core/Dialog.tsx

@@ -1,18 +1,20 @@
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
+import { useMemo } from 'react';
 import type { ReactNode } from 'react';
 import { Overlay } from '../Overlay';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 
-interface Props {
+export interface DialogProps {
   children: ReactNode;
   open: boolean;
-  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
-  title: string;
+  title: ReactNode;
-  description?: string;
+  description?: ReactNode;
   className?: string;
   wide?: boolean;
+  hideX?: boolean;
 }
 
 export function Dialog({
@@ -20,38 +22,52 @@ export function Dialog({
   className,
   wide,
   open,
-  onOpenChange,
+  onClose,
   title,
   description,
-}: Props) {
+  hideX,
+}: DialogProps) {
+  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+  const descriptionId = useMemo(
+    () => (description ? Math.random().toString(36).slice(2) : undefined),
+    [description],
+  );
+
   return (
-    <Overlay open={open} onClick={() => onOpenChange(false)} portalName="dialog">
+    <Overlay open={open} onClick={onClose} portalName="dialog">
       <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-        <div className="pointer-events-auto">
+        <div
+          role="dialog"
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          className="pointer-events-auto"
+        >
           <motion.div
             initial={{ top: 5, scale: 0.97 }}
             animate={{ top: 0, scale: 1 }}
             className={classnames(
               className,
-              'relative bg-gray-100 pointer-events-auto',
+              'relative bg-gray-50 pointer-events-auto',
               'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
               'dark:border border-gray-200 shadow-md shadow-black/10',
               wide && 'w-[80vw] max-w-[50rem]',
             )}
           >
-            <IconButton
+            {!hideX && (
-              onClick={() => onOpenChange(false)}
+              <IconButton
-              title="Close dialog"
+                onClick={onClose}
-              aria-label="Close"
+                title="Close dialog"
-              icon="x"
+                aria-label="Close"
-              size="sm"
+                icon="x"
-              className="ml-auto absolute right-1 top-1"
+                size="sm"
-            />
+                className="ml-auto absolute right-1 top-1"
+              />
+            )}
             <VStack space={3}>
-              <HStack alignItems="center" className="pb-3">
+              <h1 className="text-xl font-semibold w-full" id={titleId}>
-                <div className="text-xl font-semibold">{title}</div>
+                {title}
-              </HStack>
+              </h1>
-              {description && <div>{description}</div>}
+              {description && <p id={descriptionId}>{description}</p>}
               <div>{children}</div>
             </VStack>
           </motion.div>

src-web/hooks/Confirm.tsx

@@ -0,0 +1,16 @@
+import { Button } from '../components/core/Button';
+import { HStack } from '../components/core/Stacks';
+
+interface Props {
+  hide: () => void;
+}
+export function Confirm({ hide }: Props) {
+  return (
+    <HStack space={2} justifyContent="end">
+      <Button color="gray" onClick={hide}>
+        Cancel
+      </Button>
+      <Button color="primary">Confirm</Button>
+    </HStack>
+  );
+}

src-web/hooks/useConfirm.tsx

@@ -0,0 +1,14 @@
+import { useDialog } from '../components/DialogContext';
+import { Confirm } from './Confirm';
+
+export function useConfirm() {
+  const dialog = useDialog();
+  return ({ title, description }: { title: string; description?: string }) => {
+    dialog.show({
+      title,
+      description,
+      hideX: true,
+      render: Confirm,
+    });
+  };
+}

tailwind.config.cjs

@@ -15,7 +15,7 @@ module.exports = {
       },
       height: {
         "xs": "1.5rem",
-        "sm": "2.00rem",
+        "sm": "2.0rem",
         "md": "2.5rem"
       },
       lineHeight: {
@@ -23,7 +23,7 @@ module.exports = {
         "xs": "calc(1.5rem - 2px)",
         "sm": "calc(2.0rem - 2px)",
         "md": "calc(2.5rem - 2px)"
-      }
+      },
     },
     fontFamily: {
       "mono": ["JetBrains Mono", "Menlo", "monospace"],