From 0c52fd03e22b1c832c9273e7ea931a59be3da570 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Wed, 11 Mar 2026 15:51:57 -0700 Subject: [PATCH] Shared Table component --- apps/yaak-client/commands/commands.tsx | 2 +- .../components/DnsOverridesEditor.tsx | 2 +- .../components/Settings/SettingsHotkeys.tsx | 2 +- .../components/Settings/SettingsPlugins.tsx | 2 +- .../components/git/GitRemotesDialog.tsx | 2 +- .../components/git/HistoryDialog.tsx | 2 +- .../components/responseViewers/CsvViewer.tsx | 2 +- apps/yaak-client/tsconfig.json | 1 + apps/yaak-proxy/main.tsx | 83 +++++++++++++------ .../ui/src/components}/Table.tsx | 0 packages/ui/src/index.ts | 1 + 11 files changed, 67 insertions(+), 32 deletions(-) rename {apps/yaak-client/components/core => packages/ui/src/components}/Table.tsx (100%) diff --git a/apps/yaak-client/commands/commands.tsx b/apps/yaak-client/commands/commands.tsx index 53eea3c3..1d00b0b4 100644 --- a/apps/yaak-client/commands/commands.tsx +++ b/apps/yaak-client/commands/commands.tsx @@ -11,7 +11,7 @@ import { TableHeaderCell, TableRow, TruncatedWideTableCell, -} from '../components/core/Table'; +} from '@yaakapp-internal/ui'; import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace'; import { createFastMutation } from '../hooks/useFastMutation'; import { showDialog } from '../lib/dialog'; diff --git a/apps/yaak-client/components/DnsOverridesEditor.tsx b/apps/yaak-client/components/DnsOverridesEditor.tsx index 119ce8a5..1c5c6d4e 100644 --- a/apps/yaak-client/components/DnsOverridesEditor.tsx +++ b/apps/yaak-client/components/DnsOverridesEditor.tsx @@ -6,7 +6,7 @@ import { Checkbox } from './core/Checkbox'; import { IconButton } from './core/IconButton'; import { PlainInput } from './core/PlainInput'; import { HStack, VStack } from './core/Stacks'; -import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './core/Table'; +import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@yaakapp-internal/ui'; interface Props { workspace: Workspace; diff --git a/apps/yaak-client/components/Settings/SettingsHotkeys.tsx b/apps/yaak-client/components/Settings/SettingsHotkeys.tsx index 2600c16e..88e6e87c 100644 --- a/apps/yaak-client/components/Settings/SettingsHotkeys.tsx +++ b/apps/yaak-client/components/Settings/SettingsHotkeys.tsx @@ -22,7 +22,7 @@ import { Icon } from '@yaakapp-internal/ui'; import { IconButton } from '../core/IconButton'; import { PlainInput } from '../core/PlainInput'; import { HStack, VStack } from '../core/Stacks'; -import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table'; +import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@yaakapp-internal/ui'; const HOLD_KEYS = ['Shift', 'Control', 'Alt', 'Meta']; const LAYOUT_INSENSITIVE_KEYS = [ diff --git a/apps/yaak-client/components/Settings/SettingsPlugins.tsx b/apps/yaak-client/components/Settings/SettingsPlugins.tsx index 335cc997..d045b9f4 100644 --- a/apps/yaak-client/components/Settings/SettingsPlugins.tsx +++ b/apps/yaak-client/components/Settings/SettingsPlugins.tsx @@ -26,7 +26,7 @@ import { InlineCode } from '../core/InlineCode'; import { Link } from '../core/Link'; import { PlainInput } from '../core/PlainInput'; import { HStack } from '../core/Stacks'; -import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table'; +import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@yaakapp-internal/ui'; import { TabContent, Tabs } from '../core/Tabs/Tabs'; import { EmptyStateText } from '../EmptyStateText'; import { SelectFile } from '../SelectFile'; diff --git a/apps/yaak-client/components/git/GitRemotesDialog.tsx b/apps/yaak-client/components/git/GitRemotesDialog.tsx index 53c56300..363ecdb3 100644 --- a/apps/yaak-client/components/git/GitRemotesDialog.tsx +++ b/apps/yaak-client/components/git/GitRemotesDialog.tsx @@ -2,7 +2,7 @@ import { useGit } from '@yaakapp-internal/git'; import { showDialog } from '../../lib/dialog'; import { Button } from '../core/Button'; import { IconButton } from '../core/IconButton'; -import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table'; +import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@yaakapp-internal/ui'; import { gitCallbacks } from './callbacks'; import { addGitRemote } from './showAddRemoteDialog'; diff --git a/apps/yaak-client/components/git/HistoryDialog.tsx b/apps/yaak-client/components/git/HistoryDialog.tsx index 25d6711a..02fcbe06 100644 --- a/apps/yaak-client/components/git/HistoryDialog.tsx +++ b/apps/yaak-client/components/git/HistoryDialog.tsx @@ -8,7 +8,7 @@ import { TableHeaderCell, TableRow, TruncatedWideTableCell, -} from '../core/Table'; +} from '@yaakapp-internal/ui'; interface Props { log: GitCommit[]; diff --git a/apps/yaak-client/components/responseViewers/CsvViewer.tsx b/apps/yaak-client/components/responseViewers/CsvViewer.tsx index ee115119..a6bc3597 100644 --- a/apps/yaak-client/components/responseViewers/CsvViewer.tsx +++ b/apps/yaak-client/components/responseViewers/CsvViewer.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import Papa from 'papaparse'; import { useMemo } from 'react'; -import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table'; +import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@yaakapp-internal/ui'; interface Props { text: string | null; diff --git a/apps/yaak-client/tsconfig.json b/apps/yaak-client/tsconfig.json index ff1a9ee5..004b3e5b 100644 --- a/apps/yaak-client/tsconfig.json +++ b/apps/yaak-client/tsconfig.json @@ -11,6 +11,7 @@ "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", diff --git a/apps/yaak-proxy/main.tsx b/apps/yaak-proxy/main.tsx index 2fe9dbbb..9ff31c70 100644 --- a/apps/yaak-proxy/main.tsx +++ b/apps/yaak-proxy/main.tsx @@ -1,6 +1,15 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { type } from '@tauri-apps/plugin-os'; -import { HeaderSize } from '@yaakapp-internal/ui'; +import { + HeaderSize, + Table, + TableBody, + TableCell, + TableHead, + TableHeaderCell, + TableRow, + TruncatedWideTableCell, +} from '@yaakapp-internal/ui'; import classNames from 'classnames'; import { createStore, Provider, useAtomValue } from 'jotai'; import { StrictMode } from 'react'; @@ -11,6 +20,7 @@ import './main.css'; import { initHotkeys } from './hotkeys'; import { listen, rpc } from './rpc'; import { useRpcQueryWithEvent } from './rpc-hooks'; +import type { ProxyHeader } from '@yaakapp-internal/proxy-lib'; import { applyChange, dataAtom, httpExchangesAtom, replaceAll } from './store'; const queryClient = new QueryClient(); @@ -85,36 +95,59 @@ function App() { -
- {exchanges.length === 0 ? ( -

No traffic yet

- ) : ( - - - - - - - - - - {exchanges.map((ex) => ( - - - - - - ))} - -
MethodURLStatus
{ex.method}{ex.url}{ex.resStatus ?? '—'}
- )} -
+ {exchanges.length === 0 ? ( +

No traffic yet

+ ) : ( + + + + Method + URL + Status + Content-Type + + + + {exchanges.map((ex) => ( + + {ex.method} + + {ex.url} + + + + + + {getContentType(ex.resHeaders)} + + + ))} + +
+ )} ); } +function StatusBadge({ status, error }: { status: number | null; error: string | null }) { + if (error) return Error; + if (status == null) return —; + + const color = + status >= 500 ? 'text-danger' : status >= 400 ? 'text-warning' : status >= 300 ? 'text-notice' : 'text-success'; + + return {status}; +} + +function getContentType(headers: ProxyHeader[]): string { + const ct = headers.find((h) => h.name.toLowerCase() === 'content-type')?.value; + if (ct == null) return '—'; + // Strip parameters (e.g. "; charset=utf-8") + return ct.split(';')[0]?.trim() ?? ct; +} + createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/apps/yaak-client/components/core/Table.tsx b/packages/ui/src/components/Table.tsx similarity index 100% rename from apps/yaak-client/components/core/Table.tsx rename to packages/ui/src/components/Table.tsx diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index c182686c..3a433ffc 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -17,3 +17,4 @@ export type { TreeNode } from "./components/tree/common"; export type { TreeItemProps } from "./components/tree/TreeItem"; export { isSelectedFamily, selectedIdsFamily } from "./components/tree/atoms"; export { minPromiseMillis } from "./lib/minPromiseMillis"; +export { Table, TableBody, TableHead, TableRow, TableCell, TruncatedWideTableCell, TableHeaderCell } from "./components/Table";