starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-21 00:01:22 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Refactor and improve layout resizing

Browse Source
This commit is contained in:
Gregory Schier
2023-03-25 21:16:10 -07:00
parent 391a436ed3
commit ae4a43f406
14 changed files with 294 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yaak App</title> <title>Yaak App</title>
<!-- <script src="http://localhost:8097"></script>--> <!-- <script src="http://localhost:8097"></script>-->

13
src-web/components/App.tsx
View File

@@ -12,7 +12,8 @@ import { keyValueQueryKey } from '../hooks/useKeyValue';
import { requestsQueryKey } from '../hooks/useRequests'; import { requestsQueryKey } from '../hooks/useRequests';
import { responsesQueryKey } from '../hooks/useResponses'; import { responsesQueryKey } from '../hooks/useResponses';
import { routePaths } from '../hooks/useRoutes'; import { routePaths } from '../hooks/useRoutes';
import { SidebarDisplayKeys } from '../hooks/useSidebarDisplay'; import type { SidebarDisplay } from '../hooks/useSidebarDisplay';
import { sidebarDisplayDefaultValue, sidebarDisplayKey } from '../hooks/useSidebarDisplay';
import { workspacesQueryKey } from '../hooks/useWorkspaces'; import { workspacesQueryKey } from '../hooks/useWorkspaces';
import { DEFAULT_FONT_SIZE } from '../lib/constants'; import { DEFAULT_FONT_SIZE } from '../lib/constants';
import { extractKeyValue, getKeyValue, setKeyValue } from '../lib/keyValueStore'; import { extractKeyValue, getKeyValue, setKeyValue } from '../lib/keyValueStore';
@@ -139,8 +140,14 @@ await listen('refresh', () => {
}); });
await listen('toggle_sidebar', async () => { await listen('toggle_sidebar', async () => {
const hidden = await getKeyValue<boolean>({ key: SidebarDisplayKeys.hidden, fallback: false }); const display = await getKeyValue<SidebarDisplay>({
await setKeyValue({ key: SidebarDisplayKeys.hidden, value: !hidden }); key: sidebarDisplayKey,
fallback: sidebarDisplayDefaultValue,
});
await setKeyValue({
key: sidebarDisplayKey,
value: { width: display.width, hidden: !display.hidden },
});
}); });
await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => { await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {

9
src-web/components/RequestPane.tsx
View File

@@ -1,5 +1,6 @@
import classnames from 'classnames'; import classnames from 'classnames';
import { useCallback, useMemo, useState } from 'react'; import type { CSSProperties } from 'react';
import { memo, useCallback, useMemo, useState } from 'react';
import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveRequest } from '../hooks/useActiveRequest';
import { useKeyValue } from '../hooks/useKeyValue'; import { useKeyValue } from '../hooks/useKeyValue';
import { useUpdateRequest } from '../hooks/useUpdateRequest'; import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -15,11 +16,12 @@ import { ParametersEditor } from './ParameterEditor';
import { UrlBar } from './UrlBar'; import { UrlBar } from './UrlBar';
interface Props { interface Props {
style?: CSSProperties;
fullHeight: boolean; fullHeight: boolean;
className?: string; className?: string;
} }
export function RequestPane({ fullHeight, className }: Props) { export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
const activeRequest = useActiveRequest(); const activeRequest = useActiveRequest();
const activeRequestId = activeRequest?.id ?? null; const activeRequestId = activeRequest?.id ?? null;
const updateRequest = useUpdateRequest(activeRequestId); const updateRequest = useUpdateRequest(activeRequestId);
@@ -78,6 +80,7 @@ export function RequestPane({ fullHeight, className }: Props) {
return ( return (
<div <div
style={style}
className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')} className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
> >
{activeRequest && ( {activeRequest && (
@@ -146,4 +149,4 @@ export function RequestPane({ fullHeight, className }: Props) {
)} )}
</div> </div>
); );
} });

53
src-web/components/RequestResponse.tsx
View File

@@ -1,15 +1,16 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import React, { useCallback, useMemo, useRef, useState } from 'react'; import React, { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useWindowSize } from 'react-use';
import { useKeyValue } from '../hooks/useKeyValue'; import { useKeyValue } from '../hooks/useKeyValue';
import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
import { clamp } from '../lib/clamp'; import { clamp } from '../lib/clamp';
import { RequestPane } from './RequestPane'; import { RequestPane } from './RequestPane';
import { ResizeHandle } from './ResizeHandle';
import { ResponsePane } from './ResponsePane'; import { ResponsePane } from './ResponsePane';
import { ResizeBar } from './Workspace';
interface Props { interface Props {
style: CSSProperties; style: CSSProperties;
vertical?: boolean;
} }
const rqst = { gridArea: 'rqst' }; const rqst = { gridArea: 'rqst' };
@@ -19,9 +20,11 @@ const drag = { gridArea: 'drag' };
const DEFAULT = 0.5; const DEFAULT = 0.5;
const MIN_WIDTH_PX = 10; const MIN_WIDTH_PX = 10;
const MIN_HEIGHT_PX = 100; const MIN_HEIGHT_PX = 100;
const STACK_VERTICAL_WIDTH = 600;
export default function RequestResponse({ style, vertical }: Props) { export const RequestResponse = memo(function RequestResponse({ style }: Props) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [vertical, setVertical] = useState<boolean>(false);
const widthKv = useKeyValue<number>({ key: 'body_width', defaultValue: DEFAULT }); const widthKv = useKeyValue<number>({ key: 'body_width', defaultValue: DEFAULT });
const heightKv = useKeyValue<number>({ key: 'body_height', defaultValue: DEFAULT }); const heightKv = useKeyValue<number>({ key: 'body_height', defaultValue: DEFAULT });
const width = widthKv.value ?? DEFAULT; const width = widthKv.value ?? DEFAULT;
@@ -31,19 +34,27 @@ export default function RequestResponse({ style, vertical }: Props) {
null, null,
); );
const windowSize = useWindowSize();
const sidebar = useSidebarDisplay();
useLayoutEffect(() => {
if (!containerRef.current) return;
const { width } = containerRef.current.getBoundingClientRect();
setVertical(width < STACK_VERTICAL_WIDTH);
}, [containerRef.current, windowSize, sidebar.width, sidebar.hidden]);
const styles = useMemo<CSSProperties>( const styles = useMemo<CSSProperties>(
() => ({ () => ({
...style, ...style,
gridTemplate: vertical gridTemplate: vertical
? ` ? `
' ${rqst.gridArea}' minmax(0,${1 - height}fr) ' ${rqst.gridArea}' minmax(0,${1 - height}fr)
' ${drag.gridArea}' auto ' ${drag.gridArea}' 0
' ${resp.gridArea}' minmax(0,${height}fr) ' ${resp.gridArea}' minmax(0,${height}fr)
/ 1fr / 1fr
` `
: ` : `
' ${rqst.gridArea} ${drag.gridArea} ${resp.gridArea}' minmax(0,1fr) ' ${rqst.gridArea} ${drag.gridArea} ${resp.gridArea}' minmax(0,1fr)
/ ${1 - width}fr auto ${width}fr / ${1 - width}fr 0 ${width}fr
`, `,
}), }),
[vertical, width, height, style], [vertical, width, height, style],
@@ -108,22 +119,18 @@ export default function RequestResponse({ style, vertical }: Props) {
); );
return ( return (
<div ref={containerRef} className="grid w-full h-full p-3" style={styles}> <div ref={containerRef} className="grid gap-1.5 w-full h-full p-3" style={styles}>
<div style={rqst}> <RequestPane style={rqst} fullHeight={!vertical} />
<RequestPane fullHeight={!vertical} /> <ResizeHandle
</div> style={drag}
<div style={drag} className={classnames('relative flex-grow-0', vertical ? 'h-3' : 'w-3')}> isResizing={isResizing}
<ResizeBar className={classnames(vertical ? 'translate-y-0.5' : 'translate-x-0.5')}
isResizing={isResizing} onResizeStart={handleResizeStart}
onResizeStart={handleResizeStart} onReset={handleReset}
onReset={handleReset} side={vertical ? 'top' : 'left'}
side={vertical ? 'top' : 'left'} justify="center"
justify="center" />
/> <ResponsePane style={resp} />
</div>
<div style={resp}>
<ResponsePane />
</div>
</div> </div>
); );
} });

57
src-web/components/ResizeHandle.tsx Normal file
View File

@@ -0,0 +1,57 @@
import classnames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import React from 'react';
interface ResizeBarProps {
style?: CSSProperties;
className?: string;
barClassName?: string;
isResizing: boolean;
onResizeStart: (e: ReactMouseEvent<HTMLDivElement>) => void;
onReset?: () => void;
side: 'left' | 'right' | 'top';
justify: 'center' | 'end' | 'start';
}
export function ResizeHandle({
style,
justify,
className,
onResizeStart,
onReset,
isResizing,
side,
}: ResizeBarProps) {
const vertical = side === 'top';
return (
<div
aria-hidden
draggable
style={style}
className={classnames(
className,
'group z-10 flex cursor-ew-resize',
vertical ? 'w-full h-3 cursor-ns-resize' : 'h-full w-3 cursor-ew-resize',
justify === 'center' && 'justify-center',
justify === 'end' && 'justify-end',
justify === 'start' && 'justify-start',
side === 'right' && 'right-0',
side === 'left' && 'left-0',
side === 'top' && 'top-0',
)}
onDragStart={onResizeStart}
onDoubleClick={onReset}
>
{/* Show global overlay with cursor style to ensure cursor remains the same when moving quickly */}
{isResizing && (
<div
className={classnames(
'fixed -left-20 -right-20 -top-20 -bottom-20 cursor-ew-resize',
vertical && 'cursor-ns-resize',
!vertical && 'cursor-ew-resize',
)}
/>
)}
</div>
);
}

174
src-web/components/ResponsePane.tsx
View File

@@ -1,4 +1,5 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { CSSProperties } from 'react';
import { memo, useEffect, useMemo, useState } from 'react'; import { memo, useEffect, useMemo, useState } from 'react';
import { useActiveRequestId } from '../hooks/useActiveRequestId'; import { useActiveRequestId } from '../hooks/useActiveRequestId';
import { useDeleteResponse } from '../hooks/useDeleteResponse'; import { useDeleteResponse } from '../hooks/useDeleteResponse';
@@ -17,10 +18,11 @@ import { StatusColor } from './core/StatusColor';
import { Webview } from './core/Webview'; import { Webview } from './core/Webview';
interface Props { interface Props {
style?: CSSProperties;
className?: string; className?: string;
} }
export const ResponsePane = memo(function ResponsePane({ className }: Props) { export const ResponsePane = memo(function ResponsePane({ style, className }: Props) {
const [pinnedResponseId, setPinnedResponseId] = useState<string | null>(null); const [pinnedResponseId, setPinnedResponseId] = useState<string | null>(null);
const activeRequestId = useActiveRequestId(); const activeRequestId = useActiveRequestId();
const responses = useResponses(activeRequestId); const responses = useResponses(activeRequestId);
@@ -43,95 +45,93 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
); );
return ( return (
<div className={classnames(className, 'h-full w-full')}> <div
<div style={style}
className={classnames( className={classnames(
'bg-gray-50 max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ', className,
'dark:bg-gray-100 rounded-md overflow-hidden border border-highlight', 'bg-gray-50 max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
'shadow shadow-gray-100 dark:shadow-gray-0', 'dark:bg-gray-100 rounded-md overflow-hidden border border-highlight',
)} 'shadow shadow-gray-100 dark:shadow-gray-0 relative',
)}
>
<HStack
alignItems="center"
className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2"
> >
{/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/} {activeResponse && (
{/*</HStack>*/} <>
<HStack <div className="whitespace-nowrap">
alignItems="center" <StatusColor statusCode={activeResponse.status}>
className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2" {activeResponse.status}
> {activeResponse.statusReason && ` ${activeResponse.statusReason}`}
{activeResponse && ( </StatusColor>
<> &nbsp;&bull;&nbsp;
<div className="whitespace-nowrap"> {activeResponse.elapsed}ms &nbsp;&bull;&nbsp;
<StatusColor statusCode={activeResponse.status}> {Math.round(activeResponse.body.length / 1000)} KB
{activeResponse.status} </div>
{activeResponse.statusReason && ` ${activeResponse.statusReason}`}
</StatusColor>
&nbsp;&bull;&nbsp;
{activeResponse.elapsed}ms &nbsp;&bull;&nbsp;
{Math.round(activeResponse.body.length / 1000)} KB
</div>
<HStack alignItems="center" className="ml-auto h-8"> <HStack alignItems="center" className="ml-auto h-8">
<Dropdown <Dropdown
items={[ items={[
{ {
label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified', label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
onSelect: toggleViewMode, onSelect: toggleViewMode,
}, },
{ type: 'separator' }, { type: 'separator' },
{ {
label: 'Clear Response', label: 'Clear Response',
onSelect: deleteResponse.mutate, onSelect: deleteResponse.mutate,
disabled: responses.length === 0, disabled: responses.length === 0,
}, },
{ {
label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`, label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
onSelect: deleteAllResponses.mutate, onSelect: deleteAllResponses.mutate,
hidden: responses.length <= 1, hidden: responses.length <= 1,
disabled: responses.length === 0, disabled: responses.length === 0,
}, },
{ type: 'separator' }, { type: 'separator' },
...responses.slice(0, 10).map((r) => ({ ...responses.slice(0, 10).map((r) => ({
label: r.status + ' - ' + r.elapsed + ' ms', label: r.status + ' - ' + r.elapsed + ' ms',
leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>, leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
onSelect: () => setPinnedResponseId(r.id), onSelect: () => setPinnedResponseId(r.id),
})), })),
]} ]}
> >
<IconButton <IconButton
title="Show response history" title="Show response history"
icon="triangleDown" icon="triangleDown"
className="ml-auto" className="ml-auto"
size="sm" size="sm"
/> />
</Dropdown> </Dropdown>
</HStack> </HStack>
</> </>
)} )}
</HStack> </HStack>
{!activeResponse ? null : activeResponse?.error ? ( {!activeResponse ? null : activeResponse?.error ? (
<div className="p-1"> <div className="p-1">
<div className="text-white bg-red-500 px-3 py-3 rounded">{activeResponse.error}</div> <div className="text-white bg-red-500 px-3 py-3 rounded">{activeResponse.error}</div>
</div> </div>
) : viewMode === 'pretty' && contentType.includes('html') ? ( ) : viewMode === 'pretty' && contentType.includes('html') ? (
<Webview body={activeResponse.body} contentType={contentType} url={activeResponse.url} /> <Webview body={activeResponse.body} contentType={contentType} url={activeResponse.url} />
) : viewMode === 'pretty' && contentType.includes('json') ? ( ) : viewMode === 'pretty' && contentType.includes('json') ? (
<Editor <Editor
readOnly readOnly
key={`${contentType}:${activeResponse.updatedAt}:pretty`} key={`${contentType}:${activeResponse.updatedAt}:pretty`}
className="bg-gray-50 dark:!bg-gray-100" className="bg-gray-50 dark:!bg-gray-100"
defaultValue={tryFormatJson(activeResponse?.body)} defaultValue={tryFormatJson(activeResponse?.body)}
contentType={contentType} contentType={contentType}
/> />
) : activeResponse?.body ? ( ) : activeResponse?.body ? (
<Editor <Editor
readOnly readOnly
key={`${contentType}:${activeResponse.updatedAt}`} key={`${contentType}:${activeResponse.updatedAt}`}
className="bg-gray-50 dark:!bg-gray-100" className="bg-gray-50 dark:!bg-gray-100"
defaultValue={activeResponse?.body} defaultValue={activeResponse?.body}
contentType={contentType} contentType={contentType}
/> />
) : null} ) : null}
</div>
</div> </div>
); );
}); });

16
src-web/components/SidebarDisplayToggle.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { memo } from 'react';
import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
import { IconButton } from './core/IconButton';
export const SidebarDisplayToggle = memo(function SidebarDisplayToggle() {
const sidebarDisplay = useSidebarDisplay();
return (
<IconButton
onClick={sidebarDisplay.toggle}
className="pointer-events-auto"
size="sm"
title="Show sidebar"
icon="hamburger"
/>
);
});

164
src-web/components/Workspace.tsx
View File

@@ -1,68 +1,20 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react'; import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import React, { memo, useCallback, useMemo, useRef, useState } from 'react'; import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useWindowSize } from 'react-use';
import { useSidebarDisplay } from '../hooks/useSidebarDisplay'; import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
import { RequestResponse } from './RequestResponse';
import { ResizeHandle } from './ResizeHandle';
import { Sidebar } from './Sidebar'; import { Sidebar } from './Sidebar';
import { WorkspaceHeader } from './WorkspaceHeader'; import { WorkspaceHeader } from './WorkspaceHeader';
import RequestResponse from './RequestResponse';
const side = { gridArea: 'side' }; const side = { gridArea: 'side' };
const head = { gridArea: 'head' }; const head = { gridArea: 'head' };
const body = { gridArea: 'body' }; const body = { gridArea: 'body' };
const drag = { gridArea: 'drag' };
const FLOATING_SIDEBAR_BREAKPOINT = 960;
export default function Workspace() { export default function Workspace() {
const windowSize = useWindowSize();
const styles = useMemo<CSSProperties>(
() => ({
gridTemplate: `
' ${head.gridArea} ${head.gridArea}' auto
' ${side.gridArea} ${body.gridArea}' minmax(0,1fr)
/ auto 1fr
`,
}),
[],
);
return (
<div className="grid w-full h-full" style={styles}>
<SidebarContainer style={side} floating={windowSize.width < FLOATING_SIDEBAR_BREAKPOINT}>
<Sidebar />
</SidebarContainer>
<HeaderContainer>
<WorkspaceHeader className="pointer-events-none" />
</HeaderContainer>
<RequestResponse style={body} vertical={windowSize.width < FLOATING_SIDEBAR_BREAKPOINT} />
</div>
);
}
const HeaderContainer = memo(function HeaderContainer({ children }: { children: ReactNode }) {
return (
<div
data-tauri-drag-region
className="h-md px-3 w-full pl-20 bg-gray-50 border-b border-b-highlight text-gray-900 pt-[1px]"
style={head}
>
{children}
</div>
);
});
interface SidebarContainerProps {
children: ReactNode;
style: CSSProperties;
floating?: boolean;
}
const SidebarContainer = memo(function SidebarContainer({
children,
style,
floating,
}: SidebarContainerProps) {
const sidebar = useSidebarDisplay(); const sidebar = useSidebarDisplay();
const [isResizing, setIsResizing] = useState<boolean>(false); const [isResizing, setIsResizing] = useState<boolean>(false);
const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>( const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
null, null,
@@ -83,7 +35,7 @@ const SidebarContainer = memo(function SidebarContainer({
const mouseStartX = e.clientX; const mouseStartX = e.clientX;
const startWidth = sidebar.width; const startWidth = sidebar.width;
moveState.current = { moveState.current = {
move: (e: MouseEvent) => { move: async (e: MouseEvent) => {
e.preventDefault(); // Prevent text selection and things e.preventDefault(); // Prevent text selection and things
sidebar.set(startWidth + (e.clientX - mouseStartX)); sidebar.set(startWidth + (e.clientX - mouseStartX));
}, },
@@ -97,96 +49,44 @@ const SidebarContainer = memo(function SidebarContainer({
document.documentElement.addEventListener('mouseup', moveState.current.up); document.documentElement.addEventListener('mouseup', moveState.current.up);
setIsResizing(true); setIsResizing(true);
}, },
[sidebar.width], [sidebar.width, sidebar.hidden],
); );
const sidebarStyles = useMemo( const sideWidth = sidebar.hidden ? 0 : sidebar.width;
const styles = useMemo<CSSProperties>(
() => ({ () => ({
width: sidebar.hidden ? 0 : sidebar.width, // No width when hidden gridTemplate: `
borderWidth: sidebar.hidden ? 0 : undefined, // No border when hidden ' ${head.gridArea} ${head.gridArea} ${head.gridArea}' auto
' ${side.gridArea} ${drag.gridArea} ${body.gridArea}' minmax(0,1fr)
/ ${sideWidth}px 0 1fr`,
}), }),
[sidebar.width, sidebar.hidden, style], [sideWidth],
); );
const commonClassname = classnames('overflow-hidden bg-gray-100 border-highlight');
if (floating) {
return (
<div style={style}>
<div
style={sidebarStyles}
className={classnames(
commonClassname,
'fixed top-11 z-20 left-1 bottom-1 border rounded-md shadow-lg',
)}
>
{children}
</div>
</div>
);
}
return ( return (
<div className={classnames(commonClassname, 'relative h-full border-r')} style={sidebarStyles}> <div className="grid w-full h-full" style={styles}>
<ResizeBar <div
data-tauri-drag-region
className="h-md px-3 w-full pl-20 bg-gray-50 border-b border-b-highlight text-gray-900 pt-[1px]"
style={head}
>
<WorkspaceHeader className="pointer-events-none" />
</div>
<div
style={side}
className={classnames('overflow-hidden bg-gray-100 border-r border-highlight')}
>
<Sidebar />
</div>
<ResizeHandle
className="-translate-x-3"
justify="end" justify="end"
side="right" side="right"
isResizing={isResizing} isResizing={isResizing}
onResizeStart={handleResizeStart} onResizeStart={handleResizeStart}
onReset={sidebar.reset} onReset={sidebar.reset}
/> />
{children} <RequestResponse style={body} />
</div>
);
});
interface ResizeBarProps {
className?: string;
barClassName?: string;
isResizing: boolean;
onResizeStart: (e: ReactMouseEvent<HTMLDivElement>) => void;
onReset?: () => void;
side: 'left' | 'right' | 'top';
justify: 'center' | 'end' | 'start';
}
export function ResizeBar({
justify,
className,
onResizeStart,
onReset,
isResizing,
side,
}: ResizeBarProps) {
const vertical = side === 'top';
return (
<div
aria-hidden
draggable
className={classnames(
className,
'group absolute z-10 flex cursor-ew-resize',
vertical ? 'w-full h-3 cursor-ns-resize' : 'h-full w-3 cursor-ew-resize',
justify === 'center' && 'justify-center',
justify === 'end' && 'justify-end',
justify === 'start' && 'justify-start',
side === 'right' && 'right-0',
side === 'left' && 'left-0',
side === 'top' && 'top-0',
)}
onDragStart={onResizeStart}
onDoubleClick={onReset}
>
{/* Show global overlay with cursor style to ensure cursor remains the same when moving quickly */}
{isResizing && (
<div
className={classnames(
'fixed inset-0 cursor-ew-resize',
vertical && 'cursor-ns-resize',
!vertical && 'cursor-ew-resize',
)}
/>
)}
</div> </div>
); );
} }

15
src-web/components/WorkspaceHeader.tsx
View File

@@ -1,28 +1,23 @@
import classnames from 'classnames'; import classnames from 'classnames';
import { memo } from 'react';
import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveRequest } from '../hooks/useActiveRequest';
import { useSidebarDisplay } from '../hooks/useSidebarDisplay'; import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
import { IconButton } from './core/IconButton'; import { IconButton } from './core/IconButton';
import { HStack } from './core/Stacks'; import { HStack } from './core/Stacks';
import { RequestSettingsDropdown } from './RequestSettingsDropdown'; import { RequestSettingsDropdown } from './RequestSettingsDropdown';
import { SidebarDisplayToggle } from './SidebarDisplayToggle';
import { WorkspaceDropdown } from './WorkspaceDropdown'; import { WorkspaceDropdown } from './WorkspaceDropdown';
interface Props { interface Props {
className?: string; className?: string;
} }
export function WorkspaceHeader({ className }: Props) { export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
const activeRequest = useActiveRequest(); const activeRequest = useActiveRequest();
const sidebarDisplay = useSidebarDisplay();
return ( return (
<HStack justifyContent="center" alignItems="center" className={classnames(className, 'h-full')}> <HStack justifyContent="center" alignItems="center" className={classnames(className, 'h-full')}>
<HStack className="flex-1 -ml-2 pointer-events-none" alignItems="center"> <HStack className="flex-1 -ml-2 pointer-events-none" alignItems="center">
<IconButton <SidebarDisplayToggle />
onClick={sidebarDisplay.toggle}
className="pointer-events-auto"
size="sm"
title="Show sidebar"
icon="hamburger"
/>
<WorkspaceDropdown className="pointer-events-auto" /> <WorkspaceDropdown className="pointer-events-auto" />
</HStack> </HStack>
<div className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none"> <div className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none">
@@ -43,4 +38,4 @@ export function WorkspaceHeader({ className }: Props) {
</div> </div>
</HStack> </HStack>
); );
} });

6
src-web/components/core/PairEditor.tsx
View File

@@ -125,9 +125,9 @@ export const PairEditor = memo(function PairEditor({
className={classnames( className={classnames(
className, className,
'@container', '@container',
'pb-2 grid', 'overflow-auto max-h-full pb-2 grid',
// NOTE: Add padding to top so overflow doesn't hide drop marker // Move over the width of the drag handle
'pt-1 -my-1', '-ml-3',
)} )}
> >
{pairs.map((p, i) => { {pairs.map((p, i) => {

2
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -127,7 +127,7 @@ export const TabContent = memo(function TabContent({
<div <div
tabIndex={-1} tabIndex={-1}
data-tab={value} data-tab={value}
className={classnames(className, 'tab-content', 'w-full h-full overflow-auto')} className={classnames(className, 'tab-content', 'w-full h-full')}
> >
{children} {children}
</div> </div>

20
src-web/hooks/useKeyValue.ts
View File

@@ -1,4 +1,5 @@
import { useMutation, useQuery } from '@tanstack/react-query'; import { useMutation, useQuery } from '@tanstack/react-query';
import { useCallback } from 'react';
import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore'; import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore';
const DEFAULT_NAMESPACE = 'app'; const DEFAULT_NAMESPACE = 'app';
@@ -13,7 +14,8 @@ export function keyValueQueryKey({
return ['key_value', { namespace, key: buildKeyValueKey(key) }]; return ['key_value', { namespace, key: buildKeyValueKey(key) }];
} }
export function useKeyValue<T extends string | number | boolean>({ // eslint-disable-next-line @typescript-eslint/ban-types
export function useKeyValue<T extends Object>({
namespace = DEFAULT_NAMESPACE, namespace = DEFAULT_NAMESPACE,
key, key,
defaultValue, defaultValue,
@@ -31,9 +33,23 @@ export function useKeyValue<T extends string | number | boolean>({
mutationFn: (value) => setKeyValue<T>({ namespace, key, value }), mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
}); });
const set = useCallback(
(value: ((v: T) => T) | T) => {
if (typeof value === 'function') {
mutate.mutate(value(query.data ?? defaultValue));
} else {
mutate.mutate(value);
}
},
[query.data, defaultValue],
);
const reset = useCallback(() => mutate.mutate(defaultValue), [defaultValue]);
return { return {
value: query.data, value: query.data,
isLoading: query.isLoading, isLoading: query.isLoading,
set: (value: T) => mutate.mutate(value), set,
reset,
}; };
} }

42
src-web/hooks/useSidebarDisplay.ts
View File

@@ -1,27 +1,37 @@
import { useCallback } from 'react'; import { useCallback, useMemo } from 'react';
import { clamp } from '../lib/clamp';
import { useKeyValue } from './useKeyValue'; import { useKeyValue } from './useKeyValue';
const START_WIDTH = 200; const START_WIDTH = 200;
const MIN_WIDTH = 110; const MIN_WIDTH = 150;
const MAX_WIDTH = 500; const COLLAPSE_WIDTH = MIN_WIDTH * 0.25;
export enum SidebarDisplayKeys { export const sidebarDisplayKey = 'sidebar_display';
width = 'sidebar_width', export const sidebarDisplayDefaultValue: SidebarDisplay = { hidden: false, width: START_WIDTH };
hidden = 'sidebar_hidden',
export interface SidebarDisplay {
hidden: boolean;
width: number;
} }
export function useSidebarDisplay() { export function useSidebarDisplay() {
const hiddenKv = useKeyValue<boolean>({ key: SidebarDisplayKeys.hidden, defaultValue: false }); const display = useKeyValue<SidebarDisplay>({
const widthKv = useKeyValue<number>({ key: SidebarDisplayKeys.width, defaultValue: START_WIDTH }); key: sidebarDisplayKey,
const hidden = hiddenKv.value; defaultValue: sidebarDisplayDefaultValue,
const width = widthKv.value ?? START_WIDTH; });
const hidden = display.value?.hidden ?? false;
const width = display.value?.width ?? START_WIDTH;
const set = useCallback((v: number) => widthKv.set(clamp(v, MIN_WIDTH, MAX_WIDTH)), []); const set = useCallback(
const reset = useCallback(() => widthKv.set(START_WIDTH), []); (width: number) => {
const hide = useCallback(() => hiddenKv.set(true), []); const hidden = width < COLLAPSE_WIDTH;
const show = useCallback(() => hiddenKv.set(false), []); display.set({ hidden, width: Math.max(MIN_WIDTH, width) });
const toggle = useCallback(() => hiddenKv.set(!hiddenKv.value), [hiddenKv.value]); },
[display.set],
);
const hide = useCallback(() => display.set((v) => ({ ...v, hidden: true })), [display.set]);
const show = useCallback(() => display.set((v) => ({ ...v, hidden: false })), [display.set]);
const toggle = useMemo(() => (hidden ? show : hide), [hidden, show, hide]);
const reset = display.reset;
return { width, hidden, set, reset, hide, show, toggle }; return { width, hidden, set, reset, hide, show, toggle };
} }

11
src-web/lib/keyValueStore.ts
View File

@@ -3,8 +3,6 @@ import type { KeyValue } from './models';
const DEFAULT_NAMESPACE = 'app'; const DEFAULT_NAMESPACE = 'app';
type KeyValueValue = string | number | boolean;
export async function setKeyValue<T>({ export async function setKeyValue<T>({
namespace = DEFAULT_NAMESPACE, namespace = DEFAULT_NAMESPACE,
key, key,
@@ -22,7 +20,7 @@ export async function setKeyValue<T>({
return value; return value;
} }
export async function getKeyValue<T extends KeyValueValue>({ export async function getKeyValue<T>({
namespace = DEFAULT_NAMESPACE, namespace = DEFAULT_NAMESPACE,
key, key,
fallback, fallback,
@@ -38,7 +36,7 @@ export async function getKeyValue<T extends KeyValueValue>({
return extractKeyValueOrFallback(kv, fallback); return extractKeyValueOrFallback(kv, fallback);
} }
export function extractKeyValue<T extends KeyValueValue>(kv: KeyValue | null): T | undefined { export function extractKeyValue<T>(kv: KeyValue | null): T | undefined {
if (kv === null) return undefined; if (kv === null) return undefined;
try { try {
return JSON.parse(kv.value) as T; return JSON.parse(kv.value) as T;
@@ -47,10 +45,7 @@ export function extractKeyValue<T extends KeyValueValue>(kv: KeyValue | null): T
} }
} }
export function extractKeyValueOrFallback<T extends KeyValueValue>( export function extractKeyValueOrFallback<T>(kv: KeyValue | null, fallback: T): T {
kv: KeyValue | null,
fallback: T,
): T {
const v = extractKeyValue<T>(kv); const v = extractKeyValue<T>(kv);
if (v === undefined) return fallback; if (v === undefined) return fallback;
return v; return v;