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

More subtle layout tweaks

Browse Source
This commit is contained in:
Gregory Schier
2023-03-06 08:57:57 -08:00
parent 986cd56662
commit b48a41aaec
10 changed files with 75 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src-web/App.tsx
View File

@@ -1,21 +1,12 @@
import classnames from 'classnames';
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Button } from './components/Button';
import { Divider } from './components/Divider';
import { Grid } from './components/Grid';
import { IconButton } from './components/IconButton';
import { RequestPane } from './components/RequestPane';
import { ResponsePane } from './components/ResponsePane';
import { Sidebar } from './components/Sidebar';
import { HStack } from './components/Stacks';
import { WindowDragRegion } from './components/WindowDragRegion';
import {
useDeleteRequest,
useRequests,
useRequestUpdate,
useSendRequest,
} from './hooks/useRequest';
import { useRequests } from './hooks/useRequest';
type Params = {
workspaceId: string;
@@ -26,7 +17,6 @@ function App() {
const p = useParams<Params>();
const workspaceId = p.workspaceId ?? '';
const { data: requests } = useRequests(workspaceId);
const navigate = useNavigate();
const request = requests?.find((r) => r.id === p.requestId);
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
@@ -36,40 +26,28 @@ function App() {
const isH = screenWidth > 900;
return (
<div className="grid grid-cols-[auto_1fr] h-full text-gray-900">
<div className="grid grid-cols-[auto_1fr] h-full text-gray-900 overflow-hidden rounded-[11px]">
<Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={request?.id} />
{request && (
<div className="p-2 h-full">
<div className="grid grid-rows-[auto_1fr] rounded-md h-full overflow-hidden">
<div className="h-full">
<div className="grid grid-rows-[auto_1fr] h-full overflow-hidden">
<HStack
as={WindowDragRegion}
className="pl-1 pr-3 bg-gray-50 text-sm"
justify="center"
className="px-3 bg-gray-50/50 text-sm text-gray-900 border-b border-b-gray-50 pt-[1px]"
items="center"
>
<div className="mr-auto">
<IconButton
size="xs"
icon="x"
onClick={() => navigate(`/workspaces/${workspaceId}`)}
/>
</div>
<div>{request.name}</div>
<div className="ml-auto"></div>
{request.name}
</HStack>
<div
className={classnames(
'py-2 px-1 bg-gray-25 grid overflow-auto',
'bg-gray-25 grid overflow-auto',
isH ? 'grid-cols-[1fr_1fr]' : 'grid-rows-[minmax(0,auto)_minmax(0,100%)]',
)}
>
<RequestPane
fullHeight={isH}
request={request}
className={classnames(
'border-gray-100/50',
isH ? 'pr-0 border-r' : 'pb-3 mb-1 border-b',
)}
className={classnames(isH ? 'pr-0' : 'pb-3 mb-1')}
/>
<ResponsePane requestId={request.id} />
</div>