Move split layout

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 <p className="text-text-subtlest text-sm">No traffic yet</p>;
   }
 
   return (
-    <Table scrollable className="px-2">
+    <Table scrollable className="px-2" style={style}>
       <TableHead>
         <TableRow>
           <TableHeaderCell>Method</TableHeaderCell>

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() {
           </div>
         </div>
       </HeaderSize>
-      <div className="grid grid-cols-[auto_1fr] min-h-0">
-        <Sidebar />
-        <main className="overflow-auto">
-          <ExchangesTable exchanges={exchanges} />
-        </main>
-      </div>
+      <SplitLayout
+        storageKey="proxy_sidebar"
+        layout="horizontal"
+        defaultRatio={0.8}
+        firstSlot={({ style }) => <Sidebar style={style} />}
+        secondSlot={({ style }) => <ExchangesTable style={style} exchanges={exchanges} />}
+      />
     </div>
   );
 }

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 (
-    <aside className="x-theme-sidebar bg-surface h-full w-[250px] min-w-0 overflow-y-auto border-r border-border-subtle">
+    <aside
+      style={style}
+      className="x-theme-sidebar bg-surface h-full w-[250px] min-w-0 overflow-y-auto border-r border-border-subtle"
+    >
       <div className="pt-2 text-xs">
         <Tree
           treeId={treeId}