diff --git a/apps/yaak-client/components/EnvironmentEditDialog.tsx b/apps/yaak-client/components/EnvironmentEditDialog.tsx index 6376dcff..2322c0fd 100644 --- a/apps/yaak-client/components/EnvironmentEditDialog.tsx +++ b/apps/yaak-client/components/EnvironmentEditDialog.tsx @@ -1,6 +1,9 @@ import type { Environment, Workspace } from '@yaakapp-internal/models'; import { duplicateModel, patchModel } from '@yaakapp-internal/models'; +import type { TreeHandle, TreeNode, TreeProps } from '@yaakapp-internal/ui'; +import { Icon, SplitLayout, Tree } from '@yaakapp-internal/ui'; import { atom, useAtomValue } from 'jotai'; +import { atomFamily } from 'jotai/utils'; import { useCallback, useLayoutEffect, useRef, useState } from 'react'; import { createSubEnvironmentAndActivate } from '../commands/createEnvironment'; import { activeWorkspaceAtom, activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace'; @@ -9,6 +12,7 @@ import { useEnvironmentsBreakdown, } from '../hooks/useEnvironmentsBreakdown'; import { useHotKey } from '../hooks/useHotKey'; +import { atomWithKVStorage } from '../lib/atoms/atomWithKVStorage'; import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm'; import { jotaiStore } from '../lib/jotai'; import { isBaseEnvironment, isSubEnvironment } from '../lib/model_util'; @@ -17,15 +21,10 @@ import { showColorPicker } from '../lib/showColorPicker'; import { Banner } from './core/Banner'; import type { ContextMenuProps, DropdownItem } from './core/Dropdown'; import { ContextMenu } from './core/Dropdown'; -import { Icon, Tree } from '@yaakapp-internal/ui'; -import type { TreeNode, TreeHandle, TreeProps } from '@yaakapp-internal/ui'; import { IconButton } from './core/IconButton'; import { IconTooltip } from './core/IconTooltip'; import { InlineCode } from './core/InlineCode'; import type { PairEditorHandle } from './core/PairEditor'; -import { SplitLayout } from './core/SplitLayout'; -import { atomFamily } from 'jotai/utils'; -import { atomWithKVStorage } from '../lib/atoms/atomWithKVStorage'; import { EnvironmentColorIndicator } from './EnvironmentColorIndicator'; import { EnvironmentEditor } from './EnvironmentEditor'; import { EnvironmentSharableTooltip } from './EnvironmentSharableTooltip'; @@ -55,7 +54,7 @@ export function EnvironmentEditDialog({ initialEnvironmentId, setRef }: Props) { return ( { - if (items.length === 1 && items[0]) { - const newId = await duplicateModel(items[0]); - setSelectedEnvironmentId(newId); - } else { - await Promise.all(items.map(duplicateModel)); - } - }, [setSelectedEnvironmentId]); + const handleDuplicateSelected = useCallback( + async (items: TreeModel[]) => { + if (items.length === 1 && items[0]) { + const newId = await duplicateModel(items[0]); + setSelectedEnvironmentId(newId); + } else { + await Promise.all(items.map(duplicateModel)); + } + }, + [setSelectedEnvironmentId], + ); - useHotKey('sidebar.selected.rename', handleRenameSelected, { enable: treeHasFocus, allowDefault: true, priority: 100 }); - useHotKey('sidebar.selected.delete', useCallback(() => { - const items = getSelectedTreeModels(); - if (items) handleDeleteSelected(items); - }, [getSelectedTreeModels, handleDeleteSelected]), { enable: treeHasFocus, priority: 100 }); - useHotKey('sidebar.selected.duplicate', useCallback(async () => { - const items = getSelectedTreeModels(); - if (items) await handleDuplicateSelected(items); - }, [getSelectedTreeModels, handleDuplicateSelected]), { enable: treeHasFocus, priority: 100 }); + useHotKey('sidebar.selected.rename', handleRenameSelected, { + enable: treeHasFocus, + allowDefault: true, + priority: 100, + }); + useHotKey( + 'sidebar.selected.delete', + useCallback(() => { + const items = getSelectedTreeModels(); + if (items) handleDeleteSelected(items); + }, [getSelectedTreeModels, handleDeleteSelected]), + { enable: treeHasFocus, priority: 100 }, + ); + useHotKey( + 'sidebar.selected.duplicate', + useCallback(async () => { + const items = getSelectedTreeModels(); + if (items) await handleDuplicateSelected(items); + }, [getSelectedTreeModels, handleDuplicateSelected]), + { enable: treeHasFocus, priority: 100 }, + ); const getContextMenu = useCallback( (items: TreeModel[]): ContextMenuProps['items'] => { @@ -249,7 +263,12 @@ function EnvironmentEditDialogSidebar({ return menuItems; }, - [baseEnvironments.length, handleDeleteEnvironment, setSelectedEnvironmentId], + [ + baseEnvironments.length, + handleDeleteEnvironment, + handleDuplicateSelected, + handleRenameSelected, + ], ); const handleDragEnd = useCallback(async function handleDragEnd({ diff --git a/apps/yaak-client/components/GrpcConnectionLayout.tsx b/apps/yaak-client/components/GrpcConnectionLayout.tsx index 24260914..dd519346 100644 --- a/apps/yaak-client/components/GrpcConnectionLayout.tsx +++ b/apps/yaak-client/components/GrpcConnectionLayout.tsx @@ -7,10 +7,11 @@ import { useActiveRequest } from '../hooks/useActiveRequest'; import { useGrpc } from '../hooks/useGrpc'; import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles'; import { activeGrpcConnectionAtom, useGrpcEvents } from '../hooks/usePinnedGrpcConnection'; +import { SplitLayout } from '@yaakapp-internal/ui'; +import { activeWorkspaceAtom } from '../hooks/useActiveWorkspace'; import { workspaceLayoutAtom } from '../lib/atoms'; import { Banner } from './core/Banner'; import { HotkeyList } from './core/HotkeyList'; -import { SplitLayout } from './core/SplitLayout'; import { GrpcRequestPane } from './GrpcRequestPane'; import { GrpcResponsePane } from './GrpcResponsePane'; @@ -22,6 +23,8 @@ const emptyArray: string[] = []; export function GrpcConnectionLayout({ style }: Props) { const workspaceLayout = useAtomValue(workspaceLayoutAtom); + const activeWorkspace = useAtomValue(activeWorkspaceAtom); + const wsId = activeWorkspace?.id ?? 'n/a'; const activeRequest = useActiveRequest('grpc_request'); const activeConnection = useAtomValue(activeGrpcConnectionAtom); const grpcEvents = useGrpcEvents(activeConnection?.id ?? null); @@ -79,7 +82,7 @@ export function GrpcConnectionLayout({ style }: Props) { return ( event.id} error={activeConnection.error} header={header} - splitLayoutName="grpc_events" + splitLayoutStorageKey="grpc_events" defaultRatio={0.4} renderRow={({ event, isActive, onClick }) => ( diff --git a/apps/yaak-client/components/HttpRequestLayout.tsx b/apps/yaak-client/components/HttpRequestLayout.tsx index 4b702eac..f46b9ae8 100644 --- a/apps/yaak-client/components/HttpRequestLayout.tsx +++ b/apps/yaak-client/components/HttpRequestLayout.tsx @@ -1,11 +1,12 @@ import type { HttpRequest } from '@yaakapp-internal/models'; +import type { SlotProps } from '@yaakapp-internal/ui'; +import { SplitLayout } from '@yaakapp-internal/ui'; import classNames from 'classnames'; import { useAtomValue } from 'jotai'; import type { CSSProperties } from 'react'; import { useCurrentGraphQLSchema } from '../hooks/useIntrospectGraphQL'; +import { activeWorkspaceAtom } from '../hooks/useActiveWorkspace'; import { workspaceLayoutAtom } from '../lib/atoms'; -import type { SlotProps } from './core/SplitLayout'; -import { SplitLayout } from './core/SplitLayout'; import { GraphQLDocsExplorer } from './graphql/GraphQLDocsExplorer'; import { showGraphQLDocExplorerAtom } from './graphql/graphqlAtoms'; import { HttpRequestPane } from './HttpRequestPane'; @@ -20,10 +21,12 @@ export function HttpRequestLayout({ activeRequest, style }: Props) { const showGraphQLDocExplorer = useAtomValue(showGraphQLDocExplorerAtom); const graphQLSchema = useCurrentGraphQLSchema(activeRequest); const workspaceLayout = useAtomValue(workspaceLayoutAtom); + const activeWorkspace = useAtomValue(activeWorkspaceAtom); + const wsId = activeWorkspace?.id ?? 'n/a'; const requestResponseSplit = ({ style }: Pick) => ( ( diff --git a/apps/yaak-client/components/HttpResponseTimeline.tsx b/apps/yaak-client/components/HttpResponseTimeline.tsx index 68e41698..82ac9f70 100644 --- a/apps/yaak-client/components/HttpResponseTimeline.tsx +++ b/apps/yaak-client/components/HttpResponseTimeline.tsx @@ -55,7 +55,7 @@ function Inner({ response, viewMode }: Props) { isLoading={isLoading} loadingMessage="Loading events..." emptyMessage="No events recorded" - splitLayoutName="http_response_events" + splitLayoutStorageKey="http_response_events" defaultRatio={0.25} renderRow={({ event, isActive, onClick }) => { const display = getEventDisplay(event.event); diff --git a/apps/yaak-client/components/Settings/SettingsInterface.tsx b/apps/yaak-client/components/Settings/SettingsInterface.tsx index 164ed5fc..c3e6f25c 100644 --- a/apps/yaak-client/components/Settings/SettingsInterface.tsx +++ b/apps/yaak-client/components/Settings/SettingsInterface.tsx @@ -7,7 +7,7 @@ import { useAtomValue } from 'jotai'; import { useState } from 'react'; import { activeWorkspaceAtom } from '../../hooks/useActiveWorkspace'; -import { clamp } from '../../lib/clamp'; +import { clamp } from '@yaakapp-internal/ui'; import { showConfirm } from '../../lib/confirm'; import { invokeCmd } from '../../lib/tauri'; import { CargoFeature } from '../CargoFeature'; diff --git a/apps/yaak-client/components/WebsocketRequestLayout.tsx b/apps/yaak-client/components/WebsocketRequestLayout.tsx index c26bb6c7..6d11a8ef 100644 --- a/apps/yaak-client/components/WebsocketRequestLayout.tsx +++ b/apps/yaak-client/components/WebsocketRequestLayout.tsx @@ -3,8 +3,9 @@ import classNames from 'classnames'; import { useAtomValue } from 'jotai'; import type { CSSProperties } from 'react'; +import { SplitLayout } from '@yaakapp-internal/ui'; +import { activeWorkspaceAtom } from '../hooks/useActiveWorkspace'; import { workspaceLayoutAtom } from '../lib/atoms'; -import { SplitLayout } from './core/SplitLayout'; import { WebsocketRequestPane } from './WebsocketRequestPane'; import { WebsocketResponsePane } from './WebsocketResponsePane'; @@ -15,9 +16,11 @@ interface Props { export function WebsocketRequestLayout({ activeRequest, style }: Props) { const workspaceLayout = useAtomValue(workspaceLayoutAtom); + const activeWorkspace = useAtomValue(activeWorkspaceAtom); + const wsId = activeWorkspace?.id ?? 'n/a'; return ( event.id} error={activeConnection.error} header={header} - splitLayoutName="websocket_events" + splitLayoutStorageKey="websocket_events" defaultRatio={0.4} renderRow={({ event, isActive, onClick }) => ( diff --git a/apps/yaak-client/components/Workspace.tsx b/apps/yaak-client/components/Workspace.tsx index b93f0ed3..29e9af6e 100644 --- a/apps/yaak-client/components/Workspace.tsx +++ b/apps/yaak-client/components/Workspace.tsx @@ -43,8 +43,7 @@ import { GrpcConnectionLayout } from './GrpcConnectionLayout'; import { HeaderSize } from '@yaakapp-internal/ui'; import { HttpRequestLayout } from './HttpRequestLayout'; import { Overlay } from './Overlay'; -import type { ResizeHandleEvent } from './ResizeHandle'; -import { ResizeHandle } from './ResizeHandle'; +import { ResizeHandle, type ResizeHandleEvent } from '@yaakapp-internal/ui'; import Sidebar from './Sidebar'; import { SidebarActions } from './SidebarActions'; import { WebsocketRequestLayout } from './WebsocketRequestLayout'; diff --git a/apps/yaak-client/components/core/EventViewer.tsx b/apps/yaak-client/components/core/EventViewer.tsx index 41cac8e0..329c0abf 100644 --- a/apps/yaak-client/components/core/EventViewer.tsx +++ b/apps/yaak-client/components/core/EventViewer.tsx @@ -8,7 +8,7 @@ import { AutoScroller } from './AutoScroller'; import { Banner } from './Banner'; import { Button } from './Button'; import { Separator } from './Separator'; -import { SplitLayout } from './SplitLayout'; +import { SplitLayout } from '@yaakapp-internal/ui'; import { HStack } from './Stacks'; import { IconButton } from './IconButton'; import classNames from 'classnames'; @@ -37,8 +37,8 @@ interface EventViewerProps { /** Error message to display as a banner */ error?: string | null; - /** Name for SplitLayout state persistence */ - splitLayoutName: string; + /** Key for SplitLayout state persistence */ + splitLayoutStorageKey: string; /** Default ratio for the split (0.0 - 1.0) */ defaultRatio?: number; @@ -66,7 +66,7 @@ export function EventViewer({ renderDetail, header, error, - splitLayoutName, + splitLayoutStorageKey, defaultRatio = 0.4, enableKeyboardNav = true, isLoading = false, @@ -151,7 +151,7 @@ export function EventViewer({
( diff --git a/apps/yaak-client/components/git/GitCommitDialog.tsx b/apps/yaak-client/components/git/GitCommitDialog.tsx index 07b1f8e3..60343fed 100644 --- a/apps/yaak-client/components/git/GitCommitDialog.tsx +++ b/apps/yaak-client/components/git/GitCommitDialog.tsx @@ -23,7 +23,7 @@ import { Icon } from '@yaakapp-internal/ui'; import { InlineCode } from '../core/InlineCode'; import { Input } from '../core/Input'; import { Separator } from '../core/Separator'; -import { SplitLayout } from '../core/SplitLayout'; +import { SplitLayout } from '@yaakapp-internal/ui'; import { HStack } from '../core/Stacks'; import { EmptyStateText } from '../EmptyStateText'; import { gitCallbacks } from './callbacks'; @@ -185,13 +185,13 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) { return (
(
( diff --git a/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx b/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx index d2f01029..6ba07854 100644 --- a/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx +++ b/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx @@ -24,7 +24,7 @@ import { useAtomValue } from 'jotai'; import type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from 'react'; import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useClickOutside } from '../../hooks/useClickOutside'; -import { useContainerSize } from '../../hooks/useContainerQuery'; +import { useContainerSize } from '@yaakapp-internal/ui'; import { Icon, useDebouncedValue } from '@yaakapp-internal/ui'; import { useStateWithDeps } from '../../hooks/useStateWithDeps'; import { jotaiStore } from '../../lib/jotai'; diff --git a/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx b/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx index 1b407d72..61745185 100644 --- a/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx +++ b/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx @@ -38,7 +38,7 @@ function ActualEventStreamViewer({ response }: Props) { events={events.data ?? []} getEventKey={(_, index) => String(index)} error={events.error ? String(events.error) : null} - splitLayoutName="sse_events" + splitLayoutStorageKey="sse_events" defaultRatio={0.4} renderRow={({ event, index, isActive, onClick }) => ( { pdfjs.GlobalWorkerOptions.workerSrc = new URL( diff --git a/apps/yaak-client/lib/atoms.ts b/apps/yaak-client/lib/atoms.ts index f8dd844d..94c565cc 100644 --- a/apps/yaak-client/lib/atoms.ts +++ b/apps/yaak-client/lib/atoms.ts @@ -3,7 +3,7 @@ import type { UpdateInfo } from "@yaakapp-internal/tauri-client"; import type { Atom } from "jotai"; import { atom } from "jotai"; import { selectAtom } from "jotai/utils"; -import type { SplitLayoutLayout } from "../components/core/SplitLayout"; +import type { SplitLayoutLayout } from "@yaakapp-internal/ui"; import { atomWithKVStorage } from "./atoms/atomWithKVStorage"; export function deepEqualAtom(a: Atom) { diff --git a/apps/yaak-proxy/components/ExchangesTable.tsx b/apps/yaak-proxy/components/ExchangesTable.tsx index 4f8557ac..1a49c26c 100644 --- a/apps/yaak-proxy/components/ExchangesTable.tsx +++ b/apps/yaak-proxy/components/ExchangesTable.tsx @@ -12,15 +12,16 @@ import classNames from 'classnames'; interface Props { exchanges: HttpExchange[]; + style?: React.CSSProperties; } -export function ExchangesTable({ exchanges }: Props) { +export function ExchangesTable({ exchanges, style }: Props) { if (exchanges.length === 0) { return

No traffic yet

; } return ( - +
Method diff --git a/apps/yaak-proxy/components/ProxyLayout.tsx b/apps/yaak-proxy/components/ProxyLayout.tsx index 4633b34e..60225c71 100644 --- a/apps/yaak-proxy/components/ProxyLayout.tsx +++ b/apps/yaak-proxy/components/ProxyLayout.tsx @@ -1,4 +1,4 @@ -import { HeaderSize } from '@yaakapp-internal/ui'; +import { HeaderSize, SplitLayout } from '@yaakapp-internal/ui'; import classNames from 'classnames'; import { useAtomValue } from 'jotai'; import { useRpcQueryWithEvent } from '../hooks/useRpcQueryWithEvent'; @@ -56,12 +56,13 @@ export function ProxyLayout() { -
- -
- -
-
+ } + secondSlot={({ style }) => } + /> ); } diff --git a/apps/yaak-proxy/components/Sidebar.tsx b/apps/yaak-proxy/components/Sidebar.tsx index 0192b12b..f3f06917 100644 --- a/apps/yaak-proxy/components/Sidebar.tsx +++ b/apps/yaak-proxy/components/Sidebar.tsx @@ -190,14 +190,17 @@ function ItemInner({ item }: { item: SidebarItem }) { ); } -export function Sidebar() { +export function Sidebar({ style }: { style?: React.CSSProperties }) { const tree = useAtomValue(sidebarTreeAtom); const treeId = SIDEBAR_TREE_ID; const getItemKey = useCallback((item: SidebarItem) => item.id, []); return ( -