Hot keys and cleanup

src-web/components/RequestActionsDropdown.tsx

@@ -4,6 +4,7 @@ import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
 import { useRequest } from '../hooks/useRequest';
 import { Dropdown } from './core/Dropdown';
+import { HotKey } from './core/HotKey';
 import { Icon } from './core/Icon';
 import { InlineCode } from './core/InlineCode';
 
@@ -25,6 +26,7 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
           label: 'Duplicate',
           onSelect: duplicateRequest.mutate,
           leftSlot: <Icon icon="copy" />,
+          rightSlot: <HotKey>⌘D</HotKey>,
         },
         {
           label: 'Delete',

src-web/components/ResponsePane.tsx

@@ -80,105 +80,109 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         'shadow shadow-gray-100 dark:shadow-gray-0 relative',
       )}
     >
-      <HStack
-        alignItems="center"
-        className={classnames(
-          'italic text-gray-700 text-sm w-full flex-shrink-0',
-          // Remove a bit of space because the tabs have lots too
-          '-mb-1.5',
-        )}
-      >
-        {activeResponse && (
-          <>
-            <div className="whitespace-nowrap p-3 py-2">
-              <StatusColor statusCode={activeResponse.status}>
-                {activeResponse.status}
-                {activeResponse.statusReason && ` ${activeResponse.statusReason}`}
-              </StatusColor>
-              &nbsp;&bull;&nbsp;
-              {activeResponse.elapsed}ms &nbsp;&bull;&nbsp;
-              {Math.round(activeResponse.body.length / 1000)} KB
-            </div>
+      {activeResponse && (
+        <>
+          <HStack
+            alignItems="center"
+            className={classnames(
+              'italic text-gray-700 text-sm w-full flex-shrink-0',
+              // Remove a bit of space because the tabs have lots too
+              '-mb-1.5',
+            )}
+          >
+            {activeResponse && (
+              <>
+                <div className="whitespace-nowrap p-3 py-2">
+                  <StatusColor statusCode={activeResponse.status}>
+                    {activeResponse.status}
+                    {activeResponse.statusReason && ` ${activeResponse.statusReason}`}
+                  </StatusColor>
+                  &nbsp;&bull;&nbsp;
+                  {activeResponse.elapsed}ms &nbsp;&bull;&nbsp;
+                  {Math.round(activeResponse.body.length / 1000)} KB
+                </div>
 
-            <Dropdown
-              items={[
-                {
-                  label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
-                  onSelect: toggleViewMode,
-                },
-                { type: 'separator', label: 'Actions' },
-                {
-                  label: 'Clear Response',
-                  onSelect: deleteResponse.mutate,
-                  disabled: responses.length === 0,
-                },
-                {
-                  label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
-                  onSelect: deleteAllResponses.mutate,
-                  hidden: responses.length <= 1,
-                  disabled: responses.length === 0,
-                },
-                { type: 'separator', label: 'History' },
-                ...responses.slice(0, 10).map((r) => ({
-                  label: r.status + ' - ' + r.elapsed + ' ms',
-                  leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
-                  onSelect: () => setPinnedResponseId(r.id),
-                })),
-              ]}
+                <Dropdown
+                  items={[
+                    {
+                      label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
+                      onSelect: toggleViewMode,
+                    },
+                    { type: 'separator', label: 'Actions' },
+                    {
+                      label: 'Clear Response',
+                      onSelect: deleteResponse.mutate,
+                      disabled: responses.length === 0,
+                    },
+                    {
+                      label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
+                      onSelect: deleteAllResponses.mutate,
+                      hidden: responses.length <= 1,
+                      disabled: responses.length === 0,
+                    },
+                    { type: 'separator', label: 'History' },
+                    ...responses.slice(0, 10).map((r) => ({
+                      label: r.status + ' - ' + r.elapsed + ' ms',
+                      leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
+                      onSelect: () => setPinnedResponseId(r.id),
+                    })),
+                  ]}
+                >
+                  <IconButton
+                    title="Show response history"
+                    icon="triangleDown"
+                    className="ml-auto"
+                    size="sm"
+                    iconSize="md"
+                  />
+                </Dropdown>
+              </>
+            )}
+          </HStack>
+
+          {activeResponse?.error ? (
+            <Banner className="m-2">{activeResponse.error}</Banner>
+          ) : (
+            <Tabs
+              value={activeTab}
+              onChangeValue={setActiveTab}
+              label="Response"
+              className="px-3"
+              tabs={tabs}
             >
-              <IconButton
-                title="Show response history"
-                icon="triangleDown"
-                className="ml-auto"
-                size="sm"
-                iconSize="md"
-              />
-            </Dropdown>
-          </>
-        )}
-      </HStack>
-
-      {activeResponse?.error ? (
-        <Banner className="m-2">{activeResponse.error}</Banner>
-      ) : (
-        <Tabs
-          value={activeTab}
-          onChangeValue={setActiveTab}
-          label="Response"
-          className="px-3"
-          tabs={tabs}
-        >
-          <TabContent value="body">
-            {activeResponse === null ? (
-              <EmptyStateText>No Response</EmptyStateText>
-            ) : viewMode === 'pretty' && contentType.includes('html') ? (
-              <Webview
-                body={activeResponse.body}
-                contentType={contentType}
-                url={activeResponse.url}
-              />
-            ) : viewMode === 'pretty' && contentType.includes('json') ? (
-              <Editor
-                readOnly
-                forceUpdateKey={`pretty::${activeResponse.updatedAt}`}
-                className="bg-gray-50 dark:!bg-gray-100"
-                defaultValue={tryFormatJson(activeResponse?.body)}
-                contentType={contentType}
-              />
-            ) : activeResponse?.body ? (
-              <Editor
-                readOnly
-                forceUpdateKey={activeResponse.updatedAt}
-                className="bg-gray-50 dark:!bg-gray-100"
-                defaultValue={activeResponse?.body}
-                contentType={contentType}
-              />
-            ) : null}
-          </TabContent>
-          <TabContent value="headers">
-            <ResponseHeaders headers={activeResponse?.headers ?? []} />
-          </TabContent>
-        </Tabs>
+              <TabContent value="body">
+                {!activeResponse.body ? (
+                  <EmptyStateText>No Response</EmptyStateText>
+                ) : viewMode === 'pretty' && contentType.includes('html') ? (
+                  <Webview
+                    body={activeResponse.body}
+                    contentType={contentType}
+                    url={activeResponse.url}
+                  />
+                ) : viewMode === 'pretty' && contentType.includes('json') ? (
+                  <Editor
+                    readOnly
+                    forceUpdateKey={`pretty::${activeResponse.updatedAt}`}
+                    className="bg-gray-50 dark:!bg-gray-100"
+                    defaultValue={tryFormatJson(activeResponse?.body)}
+                    contentType={contentType}
+                  />
+                ) : activeResponse?.body ? (
+                  <Editor
+                    readOnly
+                    forceUpdateKey={activeResponse.updatedAt}
+                    className="bg-gray-50 dark:!bg-gray-100"
+                    defaultValue={activeResponse?.body}
+                    contentType={contentType}
+                  />
+                ) : null}
+              </TabContent>
+              <TabContent value="headers">
+                <ResponseHeaders headers={activeResponse?.headers ?? []} />
+              </TabContent>
+            </Tabs>
+          )}
+        </>
       )}
     </div>
   );

src-web/components/SidebarActions.tsx

@@ -1,14 +1,26 @@
 import { memo, useCallback } from 'react';
+import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useCreateRequest } from '../hooks/useCreateRequest';
+import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
+import { useTauriEvent } from '../hooks/useTauriEvent';
 import { IconButton } from './core/IconButton';
 
 export const SidebarActions = memo(function SidebarDisplayToggle() {
   const { hidden, toggle } = useSidebarHidden();
+  const activeRequestId = useActiveRequestId();
   const createRequest = useCreateRequest({ navigateAfter: true });
+  const duplicateRequest = useDuplicateRequest({ id: activeRequestId, navigateAfter: true });
   const handleCreateRequest = useCallback(() => {
-    createRequest.mutate({ name: 'New Request' });
+    createRequest.mutate({});
   }, [createRequest]);
+  useTauriEvent('new_request', () => {
+    createRequest.mutate({});
+  });
+  // TODO: Put this somewhere better
+  useTauriEvent('duplicate_request', () => {
+    duplicateRequest.mutate();
+  });
 
   return (
     <>

src-web/components/WorkspaceHeader.tsx

@@ -13,6 +13,7 @@ interface Props {
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
   const activeRequest = useActiveRequest();
+
   return (
     <HStack
       justifyContent="center"

src-web/components/core/Dropdown.tsx

@@ -266,7 +266,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
       onClick={handleClick}
       className={classnames(
         className,
-        'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
+        'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap',
         'focus:bg-highlight focus:text-gray-900 rounded',
       )}
       {...props}

src-web/components/core/Editor/twig/completion.ts

@@ -3,18 +3,8 @@ import type { CompletionContext } from '@codemirror/autocomplete';
 const openTag = '${[ ';
 const closeTag = ' ]}';
 
-const variables = [
-  { name: 'DOMAIN' },
-  { name: 'BASE_URL' },
-  { name: 'CONTENT_THINGY' },
-  { name: 'TOKEN' },
-  { name: 'PROJECT_ID' },
-  { name: 'DUMMY' },
-  { name: 'DUMMY_2' },
-  { name: 'STRIPE_PUB_KEY' },
-  { name: 'RAILWAY_TOKEN' },
-  { name: 'SECRET' },
-  { name: 'PORT' },
+const variables: { name: string }[] = [
+  // TODO: Put variables here
 ];
 
 const MIN_MATCH_VAR = 2;

src-web/components/core/HotKey.tsx

@@ -5,7 +5,7 @@ export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
       className={classnames(
-        'bg-gray-400 bg-opacity-20 px-1.5 py-0.5 rounded text-sm',
+        'bg-highlightSecondary bg-opacity-20 px-1.5 py-0.5 rounded text-sm',
         'font-mono text-gray-500 tracking-widest',
       )}
     >