Better status tags and delete request on key

src-web/hooks/useDeleteRequest.ts

@@ -1,7 +1,9 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
+import { getRequest } from '../lib/store';
 import { useActiveRequestId } from './useActiveRequestId';
+import { useConfirm } from './useConfirm';
 import { requestsQueryKey } from './useRequests';
 import { responsesQueryKey } from './useResponses';
 import { useRoutes } from './useRoutes';
@@ -10,9 +12,23 @@ export function useDeleteRequest(id: string | null) {
   const queryClient = useQueryClient();
   const activeRequestId = useActiveRequestId();
   const routes = useRoutes();
-  return useMutation<HttpRequest, string>({
-    mutationFn: async () => invoke('delete_request', { requestId: id }),
-    onSuccess: async ({ workspaceId, id: requestId }) => {
+  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}?`,
+      });
+      if (!confirmed) return null;
+      return invoke('delete_request', { requestId: id });
+    },
+    onSuccess: async (request) => {
+      // Was it cancelled?
+      if (request === null) return;
+
+      const { workspaceId, id: requestId } = request;
       queryClient.setQueryData(responsesQueryKey({ requestId }), []); // Responses were deleted
       queryClient.setQueryData<HttpRequest[]>(requestsQueryKey({ workspaceId }), (requests) =>
         (requests ?? []).filter((r) => r.id !== requestId),

src-web/hooks/useIsResponseLoading.ts

@@ -1,8 +1,8 @@
-import { useResponses } from './useResponses';
+import { isResponseLoading } from '../lib/models';
+import { useLatestResponse } from './useLatestResponse';
 
 export function useIsResponseLoading(requestId: string | null): boolean {
-  const responses = useResponses(requestId);
-  const response = responses[responses.length - 1];
-  if (!response) return false;
-  return !(response.body || response.status || response.error);
+  const response = useLatestResponse(requestId);
+  if (response === null) return false;
+  return isResponseLoading(response);
 }

src-web/hooks/useLatestResponse.ts

@@ -0,0 +1,7 @@
+import type { HttpResponse } from '../lib/models';
+import { useResponses } from './useResponses';
+
+export function useLatestResponse(requestId: string | null): HttpResponse | null {
+  const responses = useResponses(requestId);
+  return responses[responses.length - 1] ?? null;
+}