Shared sidebar layout

apps/yaak-proxy/components/ExchangesTable.tsx

@@ -13,15 +13,16 @@ import classNames from 'classnames';
 interface Props {
   exchanges: HttpExchange[];
   style?: React.CSSProperties;
+  className?: string;
 }
 
-export function ExchangesTable({ exchanges, style }: Props) {
+export function ExchangesTable({ exchanges, style, className }: Props) {
   if (exchanges.length === 0) {
     return <p className="text-text-subtlest text-sm">No traffic yet</p>;
   }
 
   return (
-    <Table scrollable className="px-2" style={style}>
+    <Table scrollable className={classNames('px-2', className)} style={style}>
       <TableHead>
         <TableRow>
           <TableHeaderCell>Method</TableHeaderCell>

apps/yaak-proxy/components/ProxyLayout.tsx

@@ -1,6 +1,7 @@
-import { HeaderSize, SplitLayout } from '@yaakapp-internal/ui';
+import { HeaderSize, SidebarLayout } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
+import { useLocalStorage } from 'react-use';
 import { useRpcQueryWithEvent } from '../hooks/useRpcQueryWithEvent';
 import { getOsType } from '../lib/tauri';
 import { ActionIconButton } from './ActionIconButton';
@@ -10,6 +11,7 @@ import { filteredExchangesAtom, Sidebar } from './Sidebar';
 export function ProxyLayout() {
   const os = getOsType();
   const exchanges = useAtomValue(filteredExchangesAtom);
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage('sidebar_width', 250);
   const { data: proxyState } = useRpcQueryWithEvent('get_proxy_state', {}, 'proxy_state_changed');
   const isRunning = proxyState?.state === 'running';
 
@@ -56,13 +58,13 @@ export function ProxyLayout() {
           </div>
         </div>
       </HeaderSize>
-      <SplitLayout
-        storageKey="proxy_sidebar"
-        layout="horizontal"
-        defaultRatio={0.8}
-        firstSlot={({ style }) => <Sidebar style={style} />}
-        secondSlot={({ style }) => <ExchangesTable style={style} exchanges={exchanges} />}
-      />
+      <SidebarLayout
+        width={sidebarWidth ?? 250}
+        onWidthChange={setSidebarWidth}
+        sidebar={<Sidebar />}
+      >
+        <ExchangesTable exchanges={exchanges} className="overflow-auto h-full" />
+      </SidebarLayout>
     </div>
   );
 }

apps/yaak-proxy/components/Sidebar.tsx

@@ -190,17 +190,14 @@ function ItemInner({ item }: { item: SidebarItem }) {
   );
 }
 
-export function Sidebar({ style }: { style?: React.CSSProperties }) {
+export function Sidebar() {
   const tree = useAtomValue(sidebarTreeAtom);
   const treeId = SIDEBAR_TREE_ID;
 
   const getItemKey = useCallback((item: SidebarItem) => item.id, []);
 
   return (
-    <aside
-      style={style}
-      className="x-theme-sidebar bg-surface h-full w-full min-w-0 overflow-y-auto border-r border-border-subtle"
-    >
+    <aside className="x-theme-sidebar bg-surface h-full w-full min-w-0 overflow-y-auto border-r border-border-subtle">
       <div className="pt-2 text-xs">
         <Tree
           treeId={treeId}