Minor tweaks

src-web/components/RequestActionsDropdown.tsx

@@ -1,12 +1,11 @@
 import type { HTMLAttributes, ReactElement } from 'react';
-import { useConfirm } from '../hooks/useConfirm';
+import React from 'react';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
-import { useRequest } from '../hooks/useRequest';
+import { useTheme } from '../hooks/useTheme';
 import { Dropdown } from './core/Dropdown';
 import { HotKey } from './core/HotKey';
 import { Icon } from './core/Icon';
-import { InlineCode } from './core/InlineCode';
 
 interface Props {
   requestId: string;
@@ -14,10 +13,9 @@ interface Props {
 }
 
 export function RequestActionsDropdown({ requestId, children }: Props) {
-  const request = useRequest(requestId ?? null);
-  const deleteRequest = useDeleteRequest(request);
+  const deleteRequest = useDeleteRequest(requestId);
   const duplicateRequest = useDuplicateRequest({ id: requestId, navigateAfter: true });
-  const confirm = useConfirm();
+  const { appearance, toggleAppearance } = useTheme();
 
   return (
     <Dropdown
@@ -30,22 +28,15 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
         },
         {
           label: 'Delete',
-          onSelect: async () => {
-            const confirmed = await confirm({
-              title: 'Delete Request',
-              variant: 'delete',
-              description: (
-                <>
-                  Are you sure you want to delete <InlineCode>{request?.name}</InlineCode>?
-                </>
-              ),
-            });
-            if (confirmed) {
-              deleteRequest.mutate();
-            }
-          },
+          onSelect: deleteRequest.mutate,
           leftSlot: <Icon icon="trash" />,
         },
+        { type: 'separator', label: 'Yaak Settings' },
+        {
+          label: appearance === 'dark' ? 'Light Theme' : 'Dark Theme',
+          onSelect: toggleAppearance,
+          leftSlot: <Icon icon={appearance === 'dark' ? 'sun' : 'moon'} />,
+        },
       ]}
     >
       {children}

src-web/components/Sidebar.tsx

@@ -13,10 +13,9 @@ import type { HttpRequest } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
 import { Button } from './core/Button';
 import { Icon } from './core/Icon';
-import { HStack, VStack } from './core/Stacks';
+import { VStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
 import { DropMarker } from './DropMarker';
-import { ToggleThemeButton } from './ToggleThemeButton';
 
 interface Props {
   className?: string;
@@ -48,9 +47,6 @@ 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">
-          <ToggleThemeButton />
-        </HStack>
       </div>
     </div>
   );

src-web/components/ToggleThemeButton.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { useTheme } from '../hooks/useTheme';
-import { IconButton } from './core/IconButton';
-
-export function ToggleThemeButton() {
-  const { appearance, toggleAppearance } = useTheme();
-  return (
-    <IconButton
-      title={appearance === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
-      icon={appearance === 'dark' ? 'moon' : 'sun'}
-      onClick={toggleAppearance}
-    />
-  );
-}

src-web/components/WorkspaceActionsDropdown.tsx

@@ -1,7 +1,6 @@
 import classnames from 'classnames';
 import { memo, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
-import { useConfirm } from '../hooks/useConfirm';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
 import { useRoutes } from '../hooks/useRoutes';
@@ -10,7 +9,6 @@ import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
-import { InlineCode } from './core/InlineCode';
 
 type Props = {
   className?: string;
@@ -21,9 +19,8 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
   const activeWorkspace = useActiveWorkspace();
   const activeWorkspaceId = activeWorkspace?.id ?? null;
   const createWorkspace = useCreateWorkspace({ navigateAfter: true });
-  const deleteWorkspace = useDeleteWorkspace(activeWorkspaceId);
+  const deleteWorkspace = useDeleteWorkspace(activeWorkspace);
   const routes = useRoutes();
-  const confirm = useConfirm();
 
   const items: DropdownItem[] = useMemo(() => {
     const workspaceItems = workspaces.map((w) => ({
@@ -49,20 +46,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
       {
         label: 'Delete Workspace',
         leftSlot: <Icon icon="trash" />,
-        onSelect: async () => {
-          const confirmed = await confirm({
-            title: 'Delete Workspace',
-            variant: 'delete',
-            description: (
-              <>
-                Are you sure you want to delete <InlineCode>{activeWorkspace?.name}</InlineCode>?
-              </>
-            ),
-          });
-          if (confirmed) {
-            deleteWorkspace.mutate();
-          }
-        },
+        onSelect: deleteWorkspace.mutate,
       },
     ];
   }, [

src-web/components/core/StatusTag.tsx

@@ -13,6 +13,7 @@ export function StatusTag({ response, className }: Props) {
     <span
       className={classnames(
         className,
+        'font-mono',
         status >= 0 && status < 100 && 'text-red-600',
         status >= 100 && status < 200 && 'text-green-600',
         status >= 200 && status < 300 && 'text-green-600',