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',

src-web/hooks/useDeleteRequest.tsx

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
+import { InlineCode } from '../components/core/InlineCode';
 import type { HttpRequest } from '../lib/models';
 import { getRequest } from '../lib/store';
 import { useActiveRequestId } from './useActiveRequestId';
@@ -13,13 +14,18 @@ export function useDeleteRequest(id: string | null) {
   const activeRequestId = useActiveRequestId();
   const routes = useRoutes();
   const confirm = useConfirm();
+
   return useMutation<HttpRequest | null, string>({
     mutationFn: async () => {
       const request = await getRequest(id);
       const confirmed = await confirm({
         title: 'Delete Request',
         variant: 'delete',
-        description: `Are you sure you want to delete ${request?.name}?`,
+        description: (
+          <>
+            Are you sure you want to delete <InlineCode>{request?.name}</InlineCode>?
+          </>
+        ),
       });
       if (!confirmed) return null;
       return invoke('delete_request', { requestId: id });

src-web/hooks/useDeleteWorkspace.tsx

@@ -1,20 +1,37 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
+import { InlineCode } from '../components/core/InlineCode';
 import type { Workspace } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useConfirm } from './useConfirm';
 import { requestsQueryKey } from './useRequests';
 import { useRoutes } from './useRoutes';
 import { workspacesQueryKey } from './useWorkspaces';
 
-export function useDeleteWorkspace(id: string | null) {
+export function useDeleteWorkspace(workspace: Workspace | null) {
   const queryClient = useQueryClient();
   const activeWorkspaceId = useActiveWorkspaceId();
   const routes = useRoutes();
-  return useMutation<Workspace, string>({
-    mutationFn: () => {
-      return invoke('delete_workspace', { id });
+  const confirm = useConfirm();
+
+  return useMutation<Workspace | null, string>({
+    mutationFn: async () => {
+      const confirmed = await confirm({
+        title: 'Delete Workspace',
+        variant: 'delete',
+        description: (
+          <>
+            Are you sure you want to delete <InlineCode>{workspace?.name}</InlineCode>?
+          </>
+        ),
+      });
+      if (!confirmed) return null;
+      return invoke('delete_workspace', { id: workspace?.id });
     },
-    onSuccess: async ({ id: workspaceId }) => {
+    onSuccess: async (workspace) => {
+      if (workspace === null) return;
+
+      const { id: workspaceId } = workspace;
       queryClient.setQueryData<Workspace[]>(workspacesQueryKey({}), (workspaces) =>
         workspaces?.filter((workspace) => workspace.id !== workspaceId),
       );