Floating sidebar refactor

apps/yaak-proxy/components/ProxyLayout.tsx

@@ -1,6 +1,7 @@
-import { HeaderSize, SidebarLayout } from '@yaakapp-internal/ui';
+import { HeaderSize, IconButton, SidebarLayout } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
+import { useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useRpcQueryWithEvent } from '../hooks/useRpcQueryWithEvent';
 import { getOsType } from '../lib/tauri';
@@ -12,8 +13,15 @@ export function ProxyLayout() {
   const os = getOsType();
   const exchanges = useAtomValue(filteredExchangesAtom);
   const [sidebarWidth, setSidebarWidth] = useLocalStorage('sidebar_width', 250);
+  const [sidebarHidden, setSidebarHidden] = useLocalStorage('sidebar_hidden', false);
+  const [floatingSidebarHidden, setFloatingSidebarHidden] = useLocalStorage(
+    'floating_sidebar_hidden',
+    true,
+  );
+  const [floating, setFloating] = useState(false);
   const { data: proxyState } = useRpcQueryWithEvent('get_proxy_state', {}, 'proxy_state_changed');
   const isRunning = proxyState?.state === 'running';
+  const isHidden = floating ? (floatingSidebarHidden ?? true) : (sidebarHidden ?? false);
 
   return (
     <div
@@ -30,7 +38,22 @@ export function ProxyLayout() {
         interfaceScale={1}
         className="x-theme-appHeader bg-surface"
       >
-        <div className="grid grid-cols-[minmax(0,1fr)_auto]">
+        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto]">
+          <div className="flex items-center pl-1">
+            <IconButton
+              size="sm"
+              title="Toggle sidebar"
+              icon={isHidden ? 'left_panel_hidden' : 'left_panel_visible'}
+              iconColor="secondary"
+              onClick={() => {
+                if (floating) {
+                  setFloatingSidebarHidden(!floatingSidebarHidden);
+                } else {
+                  setSidebarHidden(!sidebarHidden);
+                }
+              }}
+            />
+          </div>
           <div data-tauri-drag-region className="flex items-center text-sm px-2">
             Yaak Proxy
           </div>
@@ -61,7 +84,43 @@ export function ProxyLayout() {
       <SidebarLayout
         width={sidebarWidth ?? 250}
         onWidthChange={setSidebarWidth}
-        sidebar={<Sidebar />}
+        hidden={sidebarHidden ?? false}
+        onHiddenChange={setSidebarHidden}
+        floatingHidden={floatingSidebarHidden ?? true}
+        onFloatingHiddenChange={setFloatingSidebarHidden}
+        onFloatingChange={setFloating}
+        sidebar={
+          floating ? (
+            <div
+              className={classNames(
+                'x-theme-sidebar',
+                'h-full bg-surface border-r border-border-subtle',
+                'grid grid-rows-[auto_1fr]',
+              )}
+            >
+              <HeaderSize
+                hideControls
+                size="lg"
+                className="border-transparent flex items-center pl-1"
+                osType={os}
+                hideWindowControls={false}
+                useNativeTitlebar={false}
+                interfaceScale={1}
+              >
+                <IconButton
+                  size="sm"
+                  title="Toggle sidebar"
+                  icon="left_panel_visible"
+                  iconColor="secondary"
+                  onClick={() => setFloatingSidebarHidden(true)}
+                />
+              </HeaderSize>
+              <Sidebar />
+            </div>
+          ) : (
+            <Sidebar />
+          )
+        }
       >
         <ExchangesTable exchanges={exchanges} className="overflow-auto h-full" />
       </SidebarLayout>

apps/yaak-proxy/main.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createStore, Provider } from 'jotai';
+import { LazyMotion, MotionConfig } from 'motion/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ProxyLayout } from './components/ProxyLayout';
@@ -26,11 +27,17 @@ listen('model_write', (payload) => {
   );
 });
 
+const motionFeatures = () => import('framer-motion').then((mod) => mod.domAnimation);
+
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <Provider store={jotaiStore}>
-        <ProxyLayout />
+        <LazyMotion strict features={motionFeatures}>
+          <MotionConfig transition={{ duration: 0.1 }}>
+            <ProxyLayout />
+          </MotionConfig>
+        </LazyMotion>
       </Provider>
     </QueryClientProvider>
   </StrictMode>,

apps/yaak-proxy/package.json

@@ -18,6 +18,7 @@
     "@yaakapp-internal/ui": "^1.0.0",
     "classnames": "^2.5.1",
     "jotai": "^2.18.0",
+    "motion": "^12.4.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },