Optima: Panel

src/common/app.theme.ts

@@ -153,7 +153,8 @@ export const lineHeightTextareaMd = 1.75;
 export const themeZIndexBeamView = 10;
 export const themeZIndexPageBar = 25;
 export const themeZIndexDesktopDrawer = 26;
-export const themeZIndexDesktopNav = 27;
+export const themeZIndexDesktopPanel = 27;
+export const themeZIndexDesktopNav = 30;
 export const themeZIndexOverMobileDrawer = 1301;
 
 

src/common/layout/optima/OptimaLayout.tsx

@@ -11,6 +11,7 @@ import { useUIPreferencesStore } from '~/common/state/store-ui';
 import { DesktopDrawer } from './drawer/DesktopDrawer';
 import { DesktopNav } from './nav/DesktopNav';
 import { MobileDrawer } from './drawer/MobileDrawer';
+import { MobilePanel } from './panel/MobilePanel';
 import { Modals } from './Modals';
 import { PageWrapper } from './PageWrapper';
 import { optimaActions, optimaOpenModels, optimaOpenPreferences } from './useOptima';
@@ -67,6 +68,9 @@ export function OptimaLayout(props: { suspendAutoModelsSetup?: boolean, children
 
     <PanelGroup direction='horizontal' id='root-layout' style={isMobile ? undoPanelGroupSx : undefined}>
 
+
+      {/* Desktop: 4 horizontal sections: Nav | Drawer | Page | Panel */}
+
       {!isMobile && checkVisibleNav(currentApp) && <DesktopNav component='nav' currentApp={currentApp} />}
 
       {!isMobile && <DesktopDrawer key='optima-drawer' component='aside' currentApp={currentApp} />}
@@ -77,8 +81,16 @@ export function OptimaLayout(props: { suspendAutoModelsSetup?: boolean, children
       </PageWrapper>
       {/*</Panel>*/}
 
+      {/*{!isMobile && <DesktopPanel key='optima-panel' component='aside' currentApp={currentApp} />}*/}
+
+
+      {/* Mobile - 2 panes overlay the Page */}
+
       {isMobile && <MobileDrawer key='optima-drawer' component='aside' currentApp={currentApp} />}
 
+      {isMobile && <MobilePanel key='optima-panel' component='aside' currentApp={currentApp} />}
+
+
     </PanelGroup>
 
     {/* Overlay Modals */}

src/common/layout/optima/PageWrapper.tsx

@@ -7,7 +7,7 @@ import { isPwa } from '~/common/util/pwaUtils';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 import { PageCore } from './PageCore';
-import { useOptimaDrawerOpen } from './useOptima';
+import { useOptimaDrawerOpen, useOptimaPanelOpen } from './useOptima';
 
 
 /**
@@ -19,6 +19,7 @@ export function PageWrapper(props: { component: React.ElementType, currentApp?:
 
   // external state
   const isDrawerOpen = useOptimaDrawerOpen();
+  const isPanelOpen = useOptimaPanelOpen();
   const amplitude = useUIPreferencesStore(state =>
     (isPwa() || props.isMobile || props.currentApp?.fullWidth) ? 'full' : state.centerMode,
   );
@@ -50,8 +51,11 @@ export function PageWrapper(props: { component: React.ElementType, currentApp?:
         marginLeft: !isDrawerOpen
           ? 'calc(-1 * var(--AGI-Desktop-Drawer-width))'
           : 0,
-        transition: 'margin-left 0.42s cubic-bezier(.17,.84,.44,1)',
-        willChange: 'margin-left',
+        marginRight: !isPanelOpen
+          ? 'calc(-1 * var(--AGI-Desktop-Panel-width))'
+          : 0,
+        transition: 'margin-left 0.36s cubic-bezier(.17,.84,.44,1), margin-right 0.36s cubic-bezier(.17,.84,.44,1)',
+        willChange: 'margin-left, margin-right',
       }}
     >
 

src/common/layout/optima/panel/MobilePanel.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import { Box, Drawer } from '@mui/joy';
+
+import type { NavItemApp } from '~/common/app.nav';
+
+import { optimaClosePanel, useOptimaPanelOpen } from '../useOptima';
+import { useOptimaPortalOutRef } from '../portals/useOptimaPortalOutRef';
+import { MobileNavListItem } from '~/common/layout/optima/nav/MobileNavListItem';
+
+
+function PanelContentPortal() {
+  const panelPortalRef = useOptimaPortalOutRef('optima-portal-panel', 'MobilePanel');
+  return (
+    <Box
+      ref={panelPortalRef}
+      sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    />
+  );
+}
+
+export function MobilePanel(props: { component: React.ElementType, currentApp?: NavItemApp }) {
+
+  // external state
+  const isPanelOpen = useOptimaPanelOpen();
+
+  // NOTE on `disableEnforceFocus`: see MobileDrawer
+  return (
+    <Drawer
+      id='mobile-panel'
+      component={props.component}
+      disableEnforceFocus
+      anchor='right'
+      open={isPanelOpen}
+      onClose={optimaClosePanel}
+      sx={{
+        '--Drawer-horizontalSize': 'clamp(var(--AGI-Panel-width), 30%, 100%)',
+        '--Drawer-transitionDuration': '0.2s',
+        // '& .MuiDrawer-paper': {
+        //   width: 256,
+        //   boxSizing: 'border-box',
+        // },
+      }}
+      slotProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: 'none',
+          },
+        },
+        content: {
+          sx: {
+            // style: round the right drawer corners
+            // backgroundColor: 'transparent',
+            borderTopLeftRadius: 'var(--AGI-Optima-Radius)',
+            borderBottomLeftRadius: 'var(--AGI-Optima-Radius)',
+          },
+        },
+      }}
+    >
+
+      <PanelContentPortal />
+
+      {/*<ListDivider sx={{ mb: 0 }} />*/}
+      <MobileNavListItem variant='solid' currentApp={props.currentApp} />
+
+    </Drawer>
+  );
+}

src/common/styles/app.styles.css

@@ -1,7 +1,9 @@
 :root {
     --AGI-Nav-width: 52px;
     --AGI-Drawer-width: 320px;
+    --AGI-Panel-width: 320px;
     --AGI-Desktop-Drawer-width: clamp(300px, 20.17vw, 400px);
+    --AGI-Desktop-Panel-width: clamp(300px, 20.17vw, 400px);
     --AGI-Optima-Radius: 0.75rem; /* var(--joy-radius-lg) */
     --AGI-overlay-start-opacity: 0;
 }