diff --git a/src-web/components/RequestResponse.tsx b/src-web/components/RequestResponse.tsx index 9e2a368e..e6072a06 100644 --- a/src-web/components/RequestResponse.tsx +++ b/src-web/components/RequestResponse.tsx @@ -2,7 +2,8 @@ import useResizeObserver from '@react-hook/resize-observer'; import classnames from 'classnames'; import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; import React, { memo, useCallback, useMemo, useRef, useState } from 'react'; -import { useKeyValue } from '../hooks/useKeyValue'; +import { useLocalStorage } from 'react-use'; +import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId'; import { clamp } from '../lib/clamp'; import { RequestPane } from './RequestPane'; import { ResizeHandle } from './ResizeHandle'; @@ -24,10 +25,10 @@ const STACK_VERTICAL_WIDTH = 650; export const RequestResponse = memo(function RequestResponse({ style }: Props) { const containerRef = useRef(null); const [vertical, setVertical] = useState(false); - const widthKv = useKeyValue({ key: 'body_width', defaultValue: DEFAULT }); - const heightKv = useKeyValue({ key: 'body_height', defaultValue: DEFAULT }); - const width = widthKv.value ?? DEFAULT; - const height = heightKv.value ?? DEFAULT; + const [widthRaw, setWidth] = useLocalStorage(`body_width::${useActiveWorkspaceId()}`); + const [heightRaw, setHeight] = useLocalStorage(`body_height::${useActiveWorkspaceId()}`); + const width = widthRaw ?? DEFAULT; + const height = heightRaw ?? DEFAULT; const [isResizing, setIsResizing] = useState(false); const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>( null, @@ -63,8 +64,8 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) { }; const handleReset = useCallback( - () => (vertical ? heightKv.set(DEFAULT) : widthKv.set(DEFAULT)), - [heightKv, vertical, widthKv], + () => (vertical ? setHeight(DEFAULT) : setWidth(DEFAULT)), + [setHeight, vertical, setWidth], ); const handleResizeStart = useCallback( @@ -89,7 +90,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) { MIN_HEIGHT_PX, maxHeightPx, ); - heightKv.set(newHeightPx / containerRect.height); + setHeight(newHeightPx / containerRect.height); } else { const maxWidthPx = containerRect.width - MIN_WIDTH_PX; const newWidthPx = clamp( @@ -97,7 +98,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) { MIN_WIDTH_PX, maxWidthPx, ); - widthKv.set(newWidthPx / containerRect.width); + setWidth(newWidthPx / containerRect.width); } }, up: (e: MouseEvent) => { @@ -110,7 +111,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) { document.documentElement.addEventListener('mouseup', moveState.current.up); setIsResizing(true); }, - [width, height, vertical, heightKv, widthKv], + [width, height, vertical, setHeight, setWidth], ); return ( diff --git a/src-web/components/Workspace.tsx b/src-web/components/Workspace.tsx index d98b5619..6261e697 100644 --- a/src-web/components/Workspace.tsx +++ b/src-web/components/Workspace.tsx @@ -27,7 +27,7 @@ const body = { gridArea: 'body' }; const drag = { gridArea: 'drag' }; export default function Workspace() { - const { set: setWidth, value: width, reset: resetWidth } = useSidebarWidth(); + const { setWidth, width, resetWidth } = useSidebarWidth(); const { show, hide, hidden, toggle } = useSidebarHidden(); const windowSize = useWindowSize(); diff --git a/src-web/hooks/useSidebarHidden.ts b/src-web/hooks/useSidebarHidden.ts index a64f1cca..9fd4bee0 100644 --- a/src-web/hooks/useSidebarHidden.ts +++ b/src-web/hooks/useSidebarHidden.ts @@ -1,11 +1,13 @@ import { useMemo } from 'react'; import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore'; +import { useActiveWorkspaceId } from './useActiveWorkspaceId'; import { useKeyValue } from './useKeyValue'; export function useSidebarHidden() { + const activeWorkspaceId = useActiveWorkspaceId(); const { set, value } = useKeyValue({ namespace: NAMESPACE_NO_SYNC, - key: 'sidebar_hidden', + key: ['sidebar_hidden', activeWorkspaceId ?? 'n/a'], defaultValue: false, }); diff --git a/src-web/hooks/useSidebarWidth.ts b/src-web/hooks/useSidebarWidth.ts index 362ff92e..cedfa829 100644 --- a/src-web/hooks/useSidebarWidth.ts +++ b/src-web/hooks/useSidebarWidth.ts @@ -1,10 +1,10 @@ -import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore'; -import { useKeyValue } from './useKeyValue'; +import { useCallback, useMemo } from 'react'; +import { useLocalStorage } from 'react-use'; +import { useActiveWorkspaceId } from './useActiveWorkspaceId'; export function useSidebarWidth() { - return useKeyValue({ - namespace: NAMESPACE_NO_SYNC, - key: 'sidebar_width', - defaultValue: 220, - }); + const activeWorkspaceId = useActiveWorkspaceId(); + const [width, setWidth] = useLocalStorage(`sidebar_width::${activeWorkspaceId}`, 220); + const resetWidth = useCallback(() => setWidth(220), [setWidth]); + return useMemo(() => ({ width, setWidth, resetWidth }), [width, setWidth, resetWidth]); }