diff --git a/index.html b/index.html index 305f804a..934cca9b 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ - Tauri + React + TS + Yaak App + diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns index 9c0c23ec..789aa518 100644 Binary files a/src-tauri/icons/icon.icns and b/src-tauri/icons/icon.icns differ diff --git a/src-web/components/Editor/Editor.css b/src-web/components/Editor/Editor.css index b0114614..1b49f29c 100644 --- a/src-web/components/Editor/Editor.css +++ b/src-web/components/Editor/Editor.css @@ -134,19 +134,6 @@ } } -.cm-scroller, .cm-tooltip-autocomplete > ul { - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar { - @apply w-1.5 h-1.5 bg-transparent; - } - - &::-webkit-scrollbar-thumb { - @apply bg-gray-200 hover:bg-gray-300 rounded-full; - } -} - -/* <-- */ - /* NOTE: Extra selector required to override default styles */ .cm-tooltip.cm-tooltip { @apply shadow-lg bg-gray-50 rounded overflow-hidden text-gray-900 border border-gray-200 z-50 pointer-events-auto; diff --git a/src-web/components/Editor/Editor.tsx b/src-web/components/Editor/Editor.tsx index 6fcb7b98..d7d9635a 100644 --- a/src-web/components/Editor/Editor.tsx +++ b/src-web/components/Editor/Editor.tsx @@ -5,7 +5,8 @@ import classnames from 'classnames'; import { EditorView } from 'codemirror'; import { formatSdl } from 'format-graphql'; import { useEffect, useRef } from 'react'; -import { useUnmount } from 'react-use'; +import { useDebounce, useUnmount } from 'react-use'; +import { debounce } from '../../lib/debounce'; import { IconButton } from '../IconButton'; import './Editor.css'; import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions'; @@ -96,7 +97,7 @@ export function _Editor({ readOnly && 'cm-readonly', )} > - {contentType?.includes("graphql") && ( + {contentType?.includes('graphql') && ( ; id: string }; -export function HeaderEditor({ request }: Props) { +export function HeaderEditor({ request, className }: Props) { const updateRequest = useRequestUpdate(request); const saveHeaders = (pairs: PairWithId[]) => { const headers = pairs.map((p) => ({ name: '', value: '', ...p.header })); @@ -59,7 +61,7 @@ export function HeaderEditor({ request }: Props) { }; return ( -
+
{pairs.map((p, i) => ( + + + updateRequest.mutate({ body })} /> - - -
); diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx index f82dcc97..eed51c2e 100644 --- a/src-web/components/ResponsePane.tsx +++ b/src-web/components/ResponsePane.tsx @@ -1,5 +1,5 @@ import classnames from 'classnames'; -import { useEffect, useMemo, useState } from 'react'; +import { memo, useEffect, useMemo, useState } from 'react'; import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses'; import { tryFormatJson } from '../lib/formatters'; import { Dropdown } from './Dropdown'; @@ -15,7 +15,7 @@ interface Props { className?: string; } -export function ResponsePane({ requestId, className }: Props) { +export const ResponsePane = memo(function ResponsePane({ requestId, className }: Props) { const [activeResponseId, setActiveResponseId] = useState(null); const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty'); const responses = useResponses(requestId); @@ -129,4 +129,4 @@ export function ResponsePane({ requestId, className }: Props) {
); -} +}); diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index b60b46e9..2c5a5e74 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -22,7 +22,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P
@@ -34,7 +34,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P }} /> - + {requests.map((r) => ( ))} diff --git a/src-web/components/Tabs.tsx b/src-web/components/Tabs.tsx index 959e34c1..bc0c2d90 100644 --- a/src-web/components/Tabs.tsx +++ b/src-web/components/Tabs.tsx @@ -23,25 +23,21 @@ export function Tabs({ defaultValue, label, children, tabs, className, tabListCl - - - {tabs.map((t) => ( - - {t.label} - - ))} - - + {/**/} + + {tabs.map((t) => ( + + {t.label} + + ))} + + {/**/} {children} @@ -81,7 +77,7 @@ export function TabContent({ value, children, className }: TabContentProps) { {children} diff --git a/src-web/hooks/useRequest.ts b/src-web/hooks/useRequest.ts index 819110a3..dc880ec4 100644 --- a/src-web/hooks/useRequest.ts +++ b/src-web/hooks/useRequest.ts @@ -27,6 +27,7 @@ export function useRequestUpdate(request: HttpRequest | null) { } const updatedRequest = { ...request, ...patch }; + console.log('UPDATE REQUEST', updatedRequest.url); await invoke('update_request', { request: { diff --git a/src-web/main.css b/src-web/main.css index bdaa3bc2..665501e2 100644 --- a/src-web/main.css +++ b/src-web/main.css @@ -23,6 +23,16 @@ cursor: default; } + /* Style the scrollbars */ + ::-webkit-scrollbar-corner, + ::-webkit-scrollbar { + @apply w-1.5 h-1.5 bg-gray-300/10; + } + + ::-webkit-scrollbar-thumb { + @apply bg-gray-200 hover:bg-gray-300 rounded-full; + } + :root { color-scheme: light dark; --transition-duration: 100ms ease-in-out; diff --git a/src-web/pages/Workspace.tsx b/src-web/pages/Workspace.tsx index 57e0726e..33c0ff51 100644 --- a/src-web/pages/Workspace.tsx +++ b/src-web/pages/Workspace.tsx @@ -1,6 +1,7 @@ import classnames from 'classnames'; import { useParams } from 'react-router-dom'; import { useWindowSize } from 'react-use'; +import { HeaderEditor } from '../components/HeaderEditor'; import { RequestPane } from '../components/RequestPane'; import { ResponsePane } from '../components/ResponsePane'; import { Sidebar } from '../components/Sidebar'; @@ -22,7 +23,7 @@ export default function Workspace() { const isH = width > 900; return ( -
+