More tweaking

apps/yaak-proxy/components/ActionIconButton.tsx

@@ -0,0 +1,29 @@
+import type { ActionInvocation } from '@yaakapp-internal/proxy-lib';
+import { IconButton, type IconButtonProps } from '@yaakapp-internal/ui';
+import { useCallback } from 'react';
+import { useRpcMutation } from '../hooks/useRpcMutation';
+import { useActionMetadata } from '../hooks/useActionMetadata';
+
+type ActionIconButtonProps = Omit<IconButtonProps, 'onClick' | 'title'> & {
+  action: ActionInvocation;
+  title?: string;
+};
+
+export function ActionIconButton({ action, ...props }: ActionIconButtonProps) {
+  const meta = useActionMetadata(action);
+  const { mutate, isPending } = useRpcMutation('execute_action');
+
+  const onClick = useCallback(() => {
+    mutate(action);
+  }, [action, mutate]);
+
+  return (
+    <IconButton
+      {...props}
+      title={props.title ?? meta?.label ?? '…'}
+      disabled={props.disabled || isPending}
+      isLoading={isPending}
+      onClick={onClick}
+    />
+  );
+}

apps/yaak-proxy/components/ExchangesTable.tsx

@@ -0,0 +1,71 @@
+import type { HttpExchange, ProxyHeader } from '@yaakapp-internal/proxy-lib';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+} from '@yaakapp-internal/ui';
+import classNames from 'classnames';
+
+interface Props {
+  exchanges: HttpExchange[];
+}
+
+export function ExchangesTable({ exchanges }: Props) {
+  if (exchanges.length === 0) {
+    return <p className="text-text-subtlest text-sm">No traffic yet</p>;
+  }
+
+  return (
+    <Table scrollable className="px-2">
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Method</TableHeaderCell>
+          <TableHeaderCell>URL</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Type</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {exchanges.map((ex) => (
+          <TableRow key={ex.id}>
+            <TableCell className="font-mono text-2xs">{ex.method}</TableCell>
+            <TruncatedWideTableCell className="font-mono text-2xs">{ex.url}</TruncatedWideTableCell>
+            <TableCell>
+              <StatusBadge status={ex.resStatus} error={ex.error} />
+            </TableCell>
+            <TableCell className="text-text-subtle text-xs">
+              {getContentType(ex.resHeaders)}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function StatusBadge({ status, error }: { status: number | null; error: string | null }) {
+  if (error) return <span className="text-xs text-danger">Error</span>;
+  if (status == null) return <span className="text-xs text-text-subtlest">—</span>;
+
+  const color =
+    status >= 500
+      ? 'text-danger'
+      : status >= 400
+        ? 'text-warning'
+        : status >= 300
+          ? 'text-notice'
+          : 'text-success';
+
+  return <span className={classNames('text-xs font-mono', color)}>{status}</span>;
+}
+
+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;
+}

apps/yaak-proxy/components/ProxyLayout.tsx

@@ -1,24 +1,14 @@
-import { type } from '@tauri-apps/plugin-os';
+import { HeaderSize } from '@yaakapp-internal/ui';
-import type { ProxyHeader } from '@yaakapp-internal/proxy-lib';
-import {
-  HeaderSize,
-  IconButton,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-  TruncatedWideTableCell,
-} from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 import { useRpcQueryWithEvent } from '../hooks/useRpcQueryWithEvent';
-import { ActionButton } from './ActionButton';
+import { getOsType } from '../lib/tauri';
+import { ActionIconButton } from './ActionIconButton';
+import { ExchangesTable } from './ExchangesTable';
 import { filteredExchangesAtom, Sidebar } from './Sidebar';
 
 export function ProxyLayout() {
-  const osType = type();
+  const os = getOsType();
   const exchanges = useAtomValue(filteredExchangesAtom);
   const { data: proxyState } = useRpcQueryWithEvent('get_proxy_state', {}, 'proxy_state_changed');
   const isRunning = proxyState?.state === 'running';
@@ -27,12 +17,12 @@ export function ProxyLayout() {
     <div
       className={classNames(
         'h-full w-full grid grid-rows-[auto_1fr]',
-        osType === 'linux' && 'border border-border-subtle',
+        os === 'linux' && 'border border-border-subtle',
       )}
     >
       <HeaderSize
         size="lg"
-        osType={osType}
+        osType={os}
         hideWindowControls={false}
         useNativeTitlebar={false}
         interfaceScale={1}
@@ -42,92 +32,36 @@ export function ProxyLayout() {
           <div data-tauri-drag-region className="flex items-center text-sm px-2">
             Yaak Proxy
           </div>
-          <div>
+          <div className="flex items-center gap-1 pr-1">
-            <IconButton icon="alarm_clock" title="Yo" />
+            <span
+              className={classNames('text-xs', isRunning ? 'text-success' : 'text-text-subtlest')}
+            >
+              {isRunning ? 'Running on :9090' : 'Stopped'}
+            </span>
+            {isRunning ? (
+              <ActionIconButton
+                action={{ scope: 'global', action: 'proxy_stop' }}
+                icon="circle_stop"
+                size="sm"
+                iconColor="danger"
+              />
+            ) : (
+              <ActionIconButton
+                action={{ scope: 'global', action: 'proxy_start' }}
+                icon="circle_play"
+                size="sm"
+                iconColor="success"
+              />
+            )}
           </div>
         </div>
       </HeaderSize>
       <div className="grid grid-cols-[auto_1fr] min-h-0">
         <Sidebar />
-        <main className="overflow-auto p-4">
+        <main className="overflow-auto">
-          <div className="flex items-center gap-3 mb-4">
+          <ExchangesTable exchanges={exchanges} />
-            <ActionButton
-              action={{ scope: 'global', action: 'proxy_start' }}
-              size="sm"
-              tone="primary"
-              disabled={isRunning}
-            />
-            <ActionButton
-              action={{ scope: 'global', action: 'proxy_stop' }}
-              size="sm"
-              variant="border"
-              disabled={!isRunning}
-            />
-            <span
-              className={classNames(
-                'text-xs font-medium',
-                isRunning ? 'text-success' : 'text-text-subtlest',
-              )}
-            >
-              {isRunning ? 'Running on :9090' : 'Stopped'}
-            </span>
-          </div>
-
-          {exchanges.length === 0 ? (
-            <p className="text-text-subtlest text-sm">No traffic yet</p>
-          ) : (
-            <Table scrollable>
-              <TableHead>
-                <TableRow>
-                  <TableHeaderCell>Method</TableHeaderCell>
-                  <TableHeaderCell>URL</TableHeaderCell>
-                  <TableHeaderCell>Status</TableHeaderCell>
-                  <TableHeaderCell>Type</TableHeaderCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {exchanges.map((ex) => (
-                  <TableRow key={ex.id}>
-                    <TableCell className="font-mono text-2xs">{ex.method}</TableCell>
-                    <TruncatedWideTableCell className="font-mono text-2xs">
-                      {ex.url}
-                    </TruncatedWideTableCell>
-                    <TableCell>
-                      <StatusBadge status={ex.resStatus} error={ex.error} />
-                    </TableCell>
-                    <TableCell className="text-text-subtle text-xs">
-                      {getContentType(ex.resHeaders)}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
         </main>
       </div>
     </div>
   );
 }
-
-function StatusBadge({ status, error }: { status: number | null; error: string | null }) {
-  if (error) return <span className="text-xs text-danger">Error</span>;
-  if (status == null) return <span className="text-xs text-text-subtlest">—</span>;
-
-  const color =
-    status >= 500
-      ? 'text-danger'
-      : status >= 400
-        ? 'text-warning'
-        : status >= 300
-          ? 'text-notice'
-          : 'text-success';
-
-  return <span className={classNames('text-xs font-mono', color)}>{status}</span>;
-}
-
-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;
-}

apps/yaak-proxy/index.html

@@ -21,7 +21,7 @@
   </head>
   <body class="text-base">
     <div id="root"></div>
-    <script type="module" src="/theme.ts"></script>
+    <script type="module" src="/lib/theme.ts"></script>
     <script type="module" src="/main.tsx"></script>
   </body>
 </html>

apps/yaak-proxy/lib/rpc.ts

@@ -1,12 +1,11 @@
-import { invoke } from '@tauri-apps/api/core';
-import { listen as tauriListen } from '@tauri-apps/api/event';
 import type { RpcEventSchema, RpcSchema } from '@yaakapp-internal/proxy-lib';
+import { command, subscribe } from './tauri';
 
 export type Req<K extends keyof RpcSchema> = RpcSchema[K][0];
 export type Res<K extends keyof RpcSchema> = RpcSchema[K][1];
 
 export async function rpc<K extends keyof RpcSchema>(cmd: K, payload: Req<K>): Promise<Res<K>> {
-  return invoke('rpc', { cmd, payload }) as Promise<Res<K>>;
+  return command<Res<K>>('rpc', { cmd, payload });
 }
 
 /** Subscribe to a backend event. Returns an unsubscribe function. */
@@ -14,11 +13,5 @@ export function listen<K extends keyof RpcEventSchema>(
   event: K & string,
   callback: (payload: RpcEventSchema[K]) => void,
 ): () => void {
-  let unsub: (() => void) | null = null;
+  return subscribe<RpcEventSchema[K]>(event, callback);
-  tauriListen<RpcEventSchema[K]>(event, (e) => callback(e.payload))
-    .then((fn) => {
-      unsub = fn;
-    })
-    .catch(console.error);
-  return () => unsub?.();
 }

apps/yaak-proxy/lib/tauri.ts

@@ -0,0 +1,30 @@
+import { invoke } from '@tauri-apps/api/core';
+import { listen as tauriListen } from '@tauri-apps/api/event';
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { type as tauriOsType } from '@tauri-apps/plugin-os';
+
+/** Call a Tauri command. */
+export function command<T>(cmd: string, args?: Record<string, unknown>): Promise<T> {
+  return invoke(cmd, args) as Promise<T>;
+}
+
+/** Subscribe to a Tauri event. Returns an unsubscribe function. */
+export function subscribe<T>(event: string, callback: (payload: T) => void): () => void {
+  let unsub: (() => void) | null = null;
+  tauriListen<T>(event, (e) => callback(e.payload))
+    .then((fn) => {
+      unsub = fn;
+    })
+    .catch(console.error);
+  return () => unsub?.();
+}
+
+/** Show the current webview window. */
+export function showWindow(): Promise<void> {
+  return getCurrentWebviewWindow().show();
+}
+
+/** Get the current OS type (e.g. "macos", "linux", "windows"). */
+export function getOsType() {
+  return tauriOsType();
+}

apps/yaak-proxy/lib/theme.ts

@@ -1,4 +1,3 @@
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { setWindowTheme } from "@yaakapp-internal/mac-window";
 import {
   applyThemeToDocument,
@@ -10,23 +9,22 @@ import {
   subscribeToPreferredAppearance,
   type Appearance,
 } from "@yaakapp-internal/theme";
+import { showWindow } from "./tauri";
 
-export function initTheme() {
+setPlatformOnDocument(platformFromUserAgent(navigator.userAgent));
-  setPlatformOnDocument(platformFromUserAgent(navigator.userAgent));
 
-  // Apply a quick initial theme based on CSS media query
+// Apply a quick initial theme based on CSS media query
-  let preferredAppearance: Appearance = getCSSAppearance();
+let preferredAppearance: Appearance = getCSSAppearance();
+applyTheme(preferredAppearance);
+
+// Then subscribe to accurate OS appearance detection and changes
+subscribeToPreferredAppearance((a) => {
+  preferredAppearance = a;
   applyTheme(preferredAppearance);
+});
 
-  // Then subscribe to accurate OS appearance detection and changes
+// Show window after initial theme is applied (window starts hidden to prevent flash)
-  subscribeToPreferredAppearance((a) => {
+showWindow().catch(console.error);
-    preferredAppearance = a;
-    applyTheme(preferredAppearance);
-  });
-
-  // Show window after initial theme is applied (window starts hidden to prevent flash)
-  getCurrentWebviewWindow().show().catch(console.error);
-}
 
 function applyTheme(appearance: Appearance) {
   const theme = appearance === "dark" ? defaultDarkTheme : defaultLightTheme;

apps/yaak-proxy/main.tsx

@@ -6,11 +6,8 @@ import { ProxyLayout } from './components/ProxyLayout';
 import { listen, rpc } from './lib/rpc';
 import { initHotkeys } from './lib/hotkeys';
 import { applyChange, dataAtom, replaceAll } from './lib/store';
-import { initTheme } from './lib/theme';
 import './main.css';
 
-initTheme();
-
 const queryClient = new QueryClient();
 const jotaiStore = createStore();
 

apps/yaak-proxy/tailwind.config.cjs

@@ -3,5 +3,5 @@ const sharedConfig = require("@yaakapp-internal/tailwind-config");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   ...sharedConfig,
-  content: ["./*.{html,ts,tsx}", "../../packages/ui/src/**/*.{ts,tsx}"],
+  content: ["./**/*.{html,ts,tsx}", "../../packages/ui/src/**/*.{ts,tsx}"],
 };

biome.json

@@ -6,6 +6,19 @@
       "recommended": true,
       "a11y": {
         "useKeyWithClickEvents": "off"
+      },
+      "style": {
+        "noRestrictedImports": {
+          "level": "error",
+          "options": {
+            "paths": {
+              "@tauri-apps/api/core": "Use lib/tauri.ts instead of importing @tauri-apps directly",
+              "@tauri-apps/api/event": "Use lib/tauri.ts instead of importing @tauri-apps directly",
+              "@tauri-apps/api/webviewWindow": "Use lib/tauri.ts instead of importing @tauri-apps directly",
+              "@tauri-apps/plugin-os": "Use lib/tauri.ts instead of importing @tauri-apps directly"
+            }
+          }
+        }
       }
     }
   },
@@ -32,6 +45,18 @@
       "semicolons": "always"
     }
   },
+  "overrides": [
+    {
+      "includes": ["apps/yaak-proxy/lib/tauri.ts"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noRestrictedImports": "off"
+          }
+        }
+      }
+    }
+  ],
   "files": {
     "includes": [
       "**",

packages/ui/src/components/Icon.tsx

@@ -36,6 +36,9 @@ import {
   CircleFadingArrowUpIcon,
   CircleHelpIcon,
   CircleOffIcon,
+  CirclePauseIcon,
+  CirclePlayIcon,
+  CircleStopIcon,
   ClipboardPasteIcon,
   ClockIcon,
   CodeIcon,
@@ -221,6 +224,9 @@ const icons = {
   globe: GlobeIcon,
   grip_vertical: GripVerticalIcon,
   circle_off: CircleOffIcon,
+  circle_pause: CirclePauseIcon,
+  circle_play: CirclePlayIcon,
+  circle_stop: CircleStopIcon,
   hand: HandIcon,
   hard_drive_download: HardDriveDownloadIcon,
   help: CircleHelpIcon,