A bunch of tweaks

src-web/hooks/useDeleteRequest.tsx

@@ -3,16 +3,12 @@ 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';
 import { useConfirm } from './useConfirm';
 import { requestsQueryKey } from './useRequests';
 import { responsesQueryKey } from './useResponses';
-import { useRoutes } from './useRoutes';
 
 export function useDeleteRequest(id: string | null) {
   const queryClient = useQueryClient();
-  const activeRequestId = useActiveRequestId();
-  const routes = useRoutes();
   const confirm = useConfirm();
 
   return useMutation<HttpRequest | null, string>({
@@ -39,9 +35,6 @@ export function useDeleteRequest(id: string | null) {
       queryClient.setQueryData<HttpRequest[]>(requestsQueryKey({ workspaceId }), (requests) =>
         (requests ?? []).filter((r) => r.id !== requestId),
       );
-      if (activeRequestId === requestId) {
-        routes.navigate('workspace', { workspaceId });
-      }
     },
   });
 }

src-web/hooks/useResponseViewMode.ts

@@ -1,15 +1,11 @@
-import { useKeyValue } from './useKeyValue';
+import { useLocalStorage } from 'react-use';
 
-export function useResponseViewMode(requestId?: string): [string | undefined, () => void] {
-  const v = useKeyValue<string>({
-    namespace: 'app',
-    key: ['response_view_mode', requestId ?? 'n/a'],
-    defaultValue: 'pretty',
-  });
-
-  const toggle = () => {
-    v.set(v.value === 'pretty' ? 'raw' : 'pretty');
-  };
-
-  return [v.value, toggle];
+export function useResponseViewMode(
+  requestId?: string,
+): [string | undefined, (m: 'pretty' | 'raw') => void] {
+  const [value, setValue] = useLocalStorage<'pretty' | 'raw'>(
+    `response_view_mode::${requestId}`,
+    'pretty',
+  );
+  return [value, setValue];
 }

src-web/hooks/useRoutes.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export type RouteParamsWorkspace = {
@@ -27,17 +28,20 @@ export const routePaths = {
 
 export function useRoutes() {
   const navigate = useNavigate();
-  return {
-    navigate<T extends keyof typeof routePaths>(
-      path: T,
-      ...params: Parameters<(typeof routePaths)[T]>
-    ) {
-      // Not sure how to make TS work here, but it's good from the
-      // outside caller perspective.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const resolvedPath = routePaths[path](...(params as any));
-      navigate(resolvedPath);
-    },
-    paths: routePaths,
-  };
+  return useMemo(
+    () => ({
+      navigate<T extends keyof typeof routePaths>(
+        path: T,
+        ...params: Parameters<(typeof routePaths)[T]>
+      ) {
+        // Not sure how to make TS work here, but it's good from the
+        // outside caller perspective.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const resolvedPath = routePaths[path](...(params as any));
+        navigate(resolvedPath);
+      },
+      paths: routePaths,
+    }),
+    [navigate],
+  );
 }

src-web/hooks/useSidebarWidth.ts

@@ -5,6 +5,6 @@ export function useSidebarWidth() {
   return useKeyValue<number>({
     namespace: NAMESPACE_NO_SYNC,
     key: 'sidebar_width',
-    defaultValue: 200,
+    defaultValue: 220,
   });
 }