Refactor sidebar display

src-web/components/App.tsx

@@ -1,5 +1,6 @@
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { persistQueryClient } from '@tanstack/react-query-persist-client';
 import { MotionConfig } from 'framer-motion';
 import { Suspense } from 'react';
@@ -45,7 +46,7 @@ export function App() {
               <Suspense>
                 <AppRouter />
                 <TauriListeners />
-                {/*<ReactQueryDevtools initialIsOpen={false} />*/}
+                <ReactQueryDevtools initialIsOpen={false} />
               </Suspense>
             </DialogProvider>
           </DndProvider>

src-web/components/ResponsePane.tsx

@@ -78,7 +78,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
                     onSelect: toggleViewMode,
                   },
-                  { type: 'separator' },
+                  { type: 'separator', label: 'Actions' },
                   {
                     label: 'Clear Response',
                     onSelect: deleteResponse.mutate,
@@ -90,7 +90,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     hidden: responses.length <= 1,
                     disabled: responses.length === 0,
                   },
-                  { type: 'separator' },
+                  { type: 'separator', label: 'History' },
                   ...responses.slice(0, 10).map((r) => ({
                     label: r.status + ' - ' + r.elapsed + ' ms',
                     leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,

src-web/components/SidebarActions.tsx

@@ -1,10 +1,10 @@
 import { memo, useCallback } from 'react';
 import { useCreateRequest } from '../hooks/useCreateRequest';
-import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
+import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { IconButton } from './core/IconButton';
 
 export const SidebarActions = memo(function SidebarDisplayToggle() {
-  const sidebarDisplay = useSidebarDisplay();
+  const { hidden, toggle } = useSidebarHidden();
   const createRequest = useCreateRequest({ navigateAfter: true });
   const handleCreateRequest = useCallback(() => {
     createRequest.mutate({ name: 'New Request' });
@@ -13,11 +13,11 @@ export const SidebarActions = memo(function SidebarDisplayToggle() {
   return (
     <>
       <IconButton
-        onClick={sidebarDisplay.toggle}
+        onClick={toggle}
         className="pointer-events-auto"
         size="sm"
         title="Show sidebar"
-        icon={sidebarDisplay.hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
+        icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
       />
       <IconButton
         onClick={handleCreateRequest}

src-web/components/Workspace.tsx

@@ -8,7 +8,8 @@ import type {
 } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowSize } from 'react-use';
-import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
+import { useSidebarHidden } from '../hooks/useSidebarHidden';
+import { useSidebarWidth } from '../hooks/useSidebarWidth';
 import { WINDOW_FLOATING_SIDEBAR_WIDTH } from '../lib/constants';
 import { Button } from './core/Button';
 import { HStack } from './core/Stacks';
@@ -25,7 +26,9 @@ const body = { gridArea: 'body' };
 const drag = { gridArea: 'drag' };
 
 export default function Workspace() {
-  const sidebar = useSidebarDisplay();
+  const { set: setWidth, value: width, reset: resetWidth } = useSidebarWidth();
+  const { show, hide, hidden } = useSidebarHidden();
+
   const windowSize = useWindowSize();
   const [floating, setFloating] = useState<boolean>(false);
   const [isResizing, setIsResizing] = useState<boolean>(false);
@@ -35,14 +38,17 @@ export default function Workspace() {
 
   // float/un-float sidebar on window resize
   useEffect(() => {
-    if (windowSize.width <= WINDOW_FLOATING_SIDEBAR_WIDTH) {
+    const shouldHide = windowSize.width <= WINDOW_FLOATING_SIDEBAR_WIDTH;
+    if (shouldHide && !hidden) {
       setFloating(true);
-      sidebar.hide();
-    } else {
+      hide();
+    } else if (!shouldHide && hidden) {
       setFloating(false);
-      sidebar.show();
+      show();
     }
-  }, [sidebar, windowSize.width]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowSize.width]);
 
   const unsub = () => {
     if (moveState.current !== null) {
@@ -53,15 +59,15 @@ export default function Workspace() {
 
   const handleResizeStart = useCallback(
     (e: ReactMouseEvent<HTMLDivElement>) => {
-      if (sidebar.width === undefined) return;
+      if (width === undefined) return;
 
       unsub();
       const mouseStartX = e.clientX;
-      const startWidth = sidebar.width;
+      const startWidth = width;
       moveState.current = {
         move: async (e: MouseEvent) => {
           e.preventDefault(); // Prevent text selection and things
-          sidebar.set(startWidth + (e.clientX - mouseStartX));
+          setWidth(startWidth + (e.clientX - mouseStartX));
         },
         up: (e: MouseEvent) => {
           e.preventDefault();
@@ -73,10 +79,10 @@ export default function Workspace() {
       document.documentElement.addEventListener('mouseup', moveState.current.up);
       setIsResizing(true);
     },
-    [sidebar],
+    [setWidth, width],
   );
 
-  const sideWidth = sidebar.hidden ? 0 : sidebar.width;
+  const sideWidth = hidden ? 0 : width;
   const styles = useMemo<CSSProperties>(
     () => ({
       gridTemplate: floating
@@ -118,7 +124,7 @@ export default function Workspace() {
         <WorkspaceHeader className="pointer-events-none" />
       </HeaderSize>
       {floating ? (
-        <Overlay open={!sidebar.hidden} portalName="sidebar" onClose={sidebar.hide}>
+        <Overlay open={!hidden} portalName="sidebar" onClose={hide}>
           <motion.div
             initial={{ opacity: 0, x: -10 }}
             animate={{ opacity: 1, x: 0 }}
@@ -149,7 +155,7 @@ export default function Workspace() {
             side="right"
             isResizing={isResizing}
             onResizeStart={handleResizeStart}
-            onReset={sidebar.reset}
+            onReset={resetWidth}
           />
         </>
       )}