@dxos/plugin-deck 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/DeckLayout/DeckLayout.tsx

@@ -2,24 +2,29 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Sidebar as MenuIcon } from '@phosphor-icons/react';
 import { untracked } from '@preact/signals-core';
 import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
 
-import { type LayoutParts, Surface, type Toast as ToastSchema, firstIdInPart, usePlugin } from '@dxos/app-framework';
-import { type AttentionPluginProvides } from '@dxos/plugin-attention';
+import {
+  LayoutAction,
+  createIntent,
+  Surface,
+  useCapability,
+  useIntentDispatcher,
+  usePluginManager,
+} from '@dxos/app-framework';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
 import {
   AlertDialog,
-  Button,
   Dialog as NaturalDialog,
   Main,
   Popover,
   useOnTransition,
-  useTranslation,
   type MainProps,
+  useMediaQuery,
 } from '@dxos/react-ui';
 import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
-import { getSize, mainPaddingTransitions } from '@dxos/react-ui-theme';
+import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
 import { ComplementarySidebar, type ComplementarySidebarProps } from './ComplementarySidebar';
@@ -27,17 +32,16 @@ import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
 import { Plank } from './Plank';
 import { Sidebar } from './Sidebar';
+import { ToggleComplementarySidebarButton, ToggleSidebarButton } from './SidebarButton';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
-import { DECK_PLUGIN } from '../../meta';
-import { type Overscroll } from '../../types';
-import { calculateOverscroll } from '../../util';
-import { useDeckContext } from '../DeckContext';
-import { useLayout } from '../LayoutContext';
+import { Topbar } from './Topbar';
+import { DeckCapabilities } from '../../capabilities';
+import { getMode, type Overscroll } from '../../types';
+import { calculateOverscroll, layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
+import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 
 export type DeckLayoutProps = {
-  layoutParts: LayoutParts;
-  toasts: ToastSchema[];
   overscroll: Overscroll;
   showHints: boolean;
   onDismissToast: (id: string) => void;
@@ -46,12 +50,13 @@ export type DeckLayoutProps = {
 const PlankSeparator = ({ index }: { index: number }) =>
   index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
 
-export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
-  const context = useLayout();
+export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const context = useCapability(DeckCapabilities.MutableDeckState);
   const {
-    layoutMode,
-    sidebarOpen,
-    complementarySidebarOpen,
+    sidebarState,
+    complementarySidebarState,
+    complementarySidebarPanel,
     dialogOpen,
     dialogContent,
     dialogBlockAlign,
@@ -59,22 +64,26 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
     popoverOpen,
     popoverContent,
     popoverAnchorId,
+    deck,
+    toasts,
   } = context;
-  const { t } = useTranslation(DECK_PLUGIN);
-  const { plankSizing } = useDeckContext();
-  // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-  const attentionPlugin = usePlugin<AttentionPluginProvides>('dxos.org/plugin/attention');
-  const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
+  const { active, fullscreen, solo, plankSizing } = deck;
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint);
+  const hoistStatusbar = useHoistStatusbar(breakpoint);
+  const pluginManager = usePluginManager();
 
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
-  const isSoloModeLoaded = layoutMode === 'solo' && Boolean(layoutParts.solo?.[0]);
-
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
-    const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
-    const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
+    // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+    const attended = untracked(() => {
+      const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
+      return attention.current;
+    });
+    const firstId = solo ?? active[0];
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
       //   If the plank is directly focused on first load the focus ring appears.
@@ -82,6 +91,27 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
     }
   }, []);
 
+  // Not using `breakpoint` to avoid firing when breakpoint changes between tablet and desktop.
+  // `ssr: false` to avoid using fallback values and flashing into solo mode on startup.
+  const [isNotMobile] = useMediaQuery('md', { ssr: false });
+  const shouldRevert = useRef(false);
+  useEffect(() => {
+    if (!isNotMobile && getMode(deck) === 'deck') {
+      // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+      const attended = untracked(() => {
+        const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
+        return attention.current;
+      });
+
+      shouldRevert.current = true;
+      void dispatch(
+        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: attended[0], options: { mode: 'solo' } }),
+      );
+    } else if (isNotMobile && getMode(deck) === 'solo' && shouldRevert.current) {
+      void dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { revert: true } }));
+    }
+  }, [isNotMobile, deck, dispatch]);
+
   /**
    * Clear scroll restoration state if the window is resized
    */
@@ -100,6 +130,7 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
     }
   }, []);
 
+  const layoutMode = getMode(deck);
   useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
 
   /**
@@ -107,21 +138,30 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
    */
   const handleScroll = useCallback(
     (event: UIEvent) => {
-      if (layoutMode === 'deck' && event.currentTarget === event.target) {
+      if (!solo && event.currentTarget === event.target) {
         scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
       }
     },
-    [layoutMode],
+    [solo],
   );
 
-  const isEmpty = (layoutParts.main?.length ?? 0) === 0 && (layoutParts.solo?.length ?? 0) === 0;
+  const isEmpty = !solo && active.length === 0;
 
   const padding = useMemo(() => {
-    if (layoutMode === 'deck' && overscroll === 'centering') {
-      return calculateOverscroll(layoutParts.main?.length ?? 0);
+    if (!solo && overscroll === 'centering') {
+      return calculateOverscroll(active.length);
     }
     return {};
-  }, [layoutMode, overscroll, layoutParts.main]);
+  }, [solo, overscroll, deck]);
+
+  const mainPosition = useMemo(
+    () => [
+      'grid !block-start-[env(safe-area-inset-top)]',
+      topbar && '!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
+      hoistStatusbar && 'lg:block-end-[--statusbar-size]',
+    ],
+    [topbar, hoistStatusbar],
+  );
 
   const Dialog = dialogType === 'alert' ? AlertDialog : NaturalDialog;
 
@@ -140,37 +180,27 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
     >
       <ActiveNode />
 
-      {layoutMode === 'fullscreen' && <Fullscreen id={fullScreenSlug} />}
+      {fullscreen && <Fullscreen id={solo} />}
 
-      {layoutMode !== 'fullscreen' && (
+      {!fullscreen && (
         <Main.Root
-          navigationSidebarOpen={context.sidebarOpen}
-          onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
-          complementarySidebarOpen={context.complementarySidebarOpen}
-          onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
+          navigationSidebarState={context.sidebarState}
+          onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
+          complementarySidebarState={context.complementarySidebarState}
+          onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
         >
-          {/* Notch */}
-          <Main.Notch classNames='z-[21]'>
-            <Surface role='notch-start' />
-            <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
-              <span className='sr-only'>{t('open navigation sidebar label')}</span>
-              <MenuIcon weight='light' className={getSize(5)} />
-            </Button>
-            <Surface role='notch-end' />
-          </Main.Notch>
-
           {/* Left sidebar. */}
-          <Sidebar layoutParts={layoutParts} />
+          <Sidebar />
 
           {/* Right sidebar. */}
-          <ComplementarySidebar panels={panels} current={layoutParts.complementary?.[0].id} />
+          <ComplementarySidebar panels={panels} current={complementarySidebarPanel} />
 
           {/* Dialog overlay to dismiss dialogs. */}
           <Main.Overlay />
 
           {/* No content. */}
           {isEmpty && (
-            <Main.Content handlesFocus>
+            <Main.Content bounce handlesFocus classNames={mainPosition}>
               <ContentEmpty />
             </Main.Content>
           )}
@@ -179,78 +209,81 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
           {!isEmpty && (
             <Main.Content
               bounce
-              classNames='grid block-end-[--statusbar-size]'
+              classNames={mainPosition}
               handlesFocus
               style={
                 {
-                  '--dx-main-sidebarWidth': sidebarOpen ? 'var(--nav-sidebar-size)' : '0px',
-                  '--dx-main-complementaryWidth': complementarySidebarOpen
-                    ? 'var(--complementary-sidebar-size)'
-                    : '0px',
-                  '--dx-main-contentFirstWidth': `${plankSizing[layoutParts.main?.[0]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-                  '--dx-main-contentLastWidth': `${plankSizing[layoutParts.main?.[(layoutParts.main?.length ?? 1) - 1]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                  '--dx-main-sidebarWidth':
+                    sidebarState === 'expanded'
+                      ? 'var(--nav-sidebar-size)'
+                      : sidebarState === 'collapsed'
+                        ? 'var(--l0-size)'
+                        : '0',
+                  '--dx-main-complementaryWidth':
+                    complementarySidebarState === 'expanded'
+                      ? 'var(--complementary-sidebar-size)'
+                      : complementarySidebarState === 'collapsed'
+                        ? 'var(--rail-size)'
+                        : '0',
+                  '--dx-main-contentFirstWidth': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                  '--dx-main-contentLastWidth': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
                 } as MainProps['style']
               }
             >
               <div
                 role='none'
-                className={!isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-                {...(isSoloModeLoaded && { inert: '' })}
+                className={!solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(solo && { inert: '' })}
               >
+                {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
+                {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
                 <Stack
-                  separators={false}
                   orientation='horizontal'
                   size='contain'
                   classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
                   onScroll={handleScroll}
-                  itemsCount={2 * (layoutParts.main?.length ?? 0) - 1}
+                  itemsCount={2 * (active.length ?? 0) - 1}
                   style={padding}
                   ref={deckRef}
                 >
-                  {layoutParts.main?.map((layoutEntry, index) => (
-                    <Fragment key={layoutEntry.id}>
+                  {active.map((entryId, index) => (
+                    <Fragment key={entryId}>
                       <PlankSeparator index={index} />
-                      <Plank
-                        entry={layoutEntry}
-                        layoutParts={layoutParts}
-                        part='main'
-                        layoutMode={layoutMode}
-                        order={index * 2 + 1}
-                      />
+                      <Plank id={entryId} part='deck' order={index * 2 + 1} active={active} layoutMode={layoutMode} />
                     </Fragment>
                   ))}
                 </Stack>
               </div>
               <div
                 role='none'
-                className={isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-                {...(!isSoloModeLoaded && { inert: '' })}
+                className={solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(!solo && { inert: '' })}
               >
-                <StackContext.Provider
-                  value={{ size: 'contain', orientation: 'horizontal', separators: false, rail: true }}
-                >
-                  <Plank entry={layoutParts.solo?.[0]} layoutParts={layoutParts} part='solo' layoutMode={layoutMode} />
+                {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
+                {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
+                <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
+                  <Plank id={solo} part='solo' layoutMode={layoutMode} />
                 </StackContext.Provider>
               </div>
             </Main.Content>
           )}
 
-          {/* Footer status. */}
-          <StatusBar showHints={showHints} />
+          {/* Status bar. */}
+          {topbar && <Topbar />}
+          {hoistStatusbar && <StatusBar showHints={showHints} />}
         </Main.Root>
       )}
 
       {/* Global popovers. */}
       <Popover.Portal>
         <Popover.Content
-          classNames='z-[60]'
           onEscapeKeyDown={() => {
             context.popoverOpen = false;
             context.popoverAnchorId = undefined;
           }}
         >
           <Popover.Viewport>
-            <Surface role='popover' data={popoverContent} />
+            <Surface role='popover' data={popoverContent} limit={1} />
           </Popover.Viewport>
           <Popover.Arrow />
         </Popover.Content>
@@ -259,7 +292,7 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
       {/* Global dialog. */}
       <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
         <Dialog.Overlay blockAlign={dialogBlockAlign}>
-          <Surface role='dialog' data={dialogContent} />
+          <Surface role='dialog' data={dialogContent} limit={1} />
         </Dialog.Overlay>
       </Dialog.Root>
 

package/src/components/DeckLayout/Fullscreen.tsx

@@ -4,8 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
-import { useGraph } from '@dxos/plugin-graph';
+import { Surface, useAppGraph } from '@dxos/app-framework';
 import { fixedInsetFlexLayout } from '@dxos/react-ui-theme';
 
 import { Fallback } from './Fallback';
@@ -13,7 +12,7 @@ import { SURFACE_PREFIX } from './constants';
 import { useNode } from '../../hooks';
 
 export const Fullscreen = ({ id }: { id?: string }) => {
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
   const fullScreenNode = useNode(graph, id);
 
   return (
@@ -23,7 +22,7 @@ export const Fullscreen = ({ id }: { id?: string }) => {
         limit={1}
         fallback={Fallback}
         data={{
-          active: fullScreenNode?.data,
+          subject: fullScreenNode?.data,
           component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : undefined,
         }}
       />

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -2,27 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, memo, useEffect, useMemo } from 'react';
+import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
 
-import {
-  LayoutAction,
-  NavigationAction,
-  SLUG_PATH_SEPARATOR,
-  Surface,
-  useIntentDispatcher,
-  type LayoutCoordinate,
-} from '@dxos/app-framework';
-import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation, IconButton } from '@dxos/react-ui';
+import { createIntent, LayoutAction, Surface, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { type Node } from '@dxos/plugin-graph';
+import { Icon, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { PlankControls } from './PlankControls';
 import { DECK_PLUGIN } from '../../meta';
-import { useLayout } from '../LayoutContext';
+import { DeckAction, SLUG_PATH_SEPARATOR } from '../../types';
+import { useBreakpoints } from '../../util';
+import { soloInlinePadding } from '../fragments';
 
 export type NodePlankHeadingProps = {
-  coordinate: LayoutCoordinate;
+  id: string;
+  part: 'solo' | 'deck' | 'complementary';
   node?: Node;
   canIncrementStart?: boolean;
   canIncrementEnd?: boolean;
@@ -33,7 +29,8 @@ export type NodePlankHeadingProps = {
 
 export const NodePlankHeading = memo(
   ({
-    coordinate,
+    id,
+    part,
     node,
     canIncrementStart,
     canIncrementEnd,
@@ -41,16 +38,15 @@ export const NodePlankHeading = memo(
     pending,
     actions = [],
   }: NodePlankHeadingProps) => {
-    const layoutContext = useLayout();
     const { t } = useTranslation(DECK_PLUGIN);
-    const { graph } = useGraph();
+    const { graph } = useAppGraph();
+    const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
     const label = pending
       ? t('pending heading')
       : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
-    const dispatch = useIntentDispatcher();
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
-    const [isNotMobile] = useMediaQuery('md');
 
     useEffect(() => {
       const frame = requestAnimationFrame(() => {
@@ -61,33 +57,67 @@ export const NodePlankHeading = memo(
       return () => cancelAnimationFrame(frame);
     }, [node]);
 
-    const layoutPart = coordinate.part;
     // NOTE(Zan): Node ids may now contain a path like `${space}:${id}~comments`
-    const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
+    const attendableId = id.split(SLUG_PATH_SEPARATOR).at(0);
     const capabilities = useMemo(
       () => ({
-        solo: (layoutPart === 'solo' || layoutPart === 'main') && isNotMobile,
+        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
       }),
-      [isNotMobile, layoutPart, canIncrementStart, canIncrementEnd],
+      [breakpoint, part, canIncrementStart, canIncrementEnd],
+    );
+
+    const sigilActions = useMemo(
+      () => node && [actions, graph.actions(node)].filter((a) => a.length > 0),
+      [actions, node, graph],
+    );
+    const handleAction = useCallback((action: StackItemSigilAction) => {
+      typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN });
+    }, []);
+
+    const handlePlankAction = useCallback(
+      (eventType: DeckAction.PartAdjustment) => {
+        if (eventType === 'solo') {
+          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+        } else if (eventType === 'close') {
+          if (part === 'complementary') {
+            return dispatch(
+              createIntent(LayoutAction.UpdateComplementary, {
+                part: 'complementary',
+                options: { state: 'collapsed' },
+              }),
+            );
+          } else {
+            return dispatch(
+              createIntent(LayoutAction.Close, { part: 'main', subject: [id], options: { state: false } }),
+            );
+          }
+        } else {
+          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+        }
+      },
+      [dispatch, id, part],
     );
 
     return (
-      <StackItem.Heading classNames='pie-1 border-be border-separator'>
+      <StackItem.Heading
+        classNames={[
+          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag',
+          part === 'solo' ? soloInlinePadding : 'pli-1',
+        ]}
+      >
         <ActionRoot>
-          {node ? (
+          {node && sigilActions ? (
             <StackItem.Sigil
               icon={icon}
-              related={layoutPart === 'complementary'}
+              related={part === 'complementary'}
               attendableId={attendableId}
               triggerLabel={t('actions menu label')}
-              actions={[actions, graph.actions(node)].filter((a) => a.length > 0)}
-              onAction={(action) =>
-                typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
-              }
+              actions={sigilActions}
+              onAction={handleAction}
             >
-              <Surface role='menu-footer' data={{ object: node.data }} />
+              <Surface role='menu-footer' data={{ subject: node.data }} />
             </StackItem.Sigil>
           ) : (
             <StackItem.SigilButton>
@@ -99,76 +129,19 @@ export const NodePlankHeading = memo(
         <TextTooltip text={label} onlyWhenTruncating>
           <StackItem.HeadingLabel
             attendableId={attendableId}
-            related={layoutPart === 'complementary'}
+            related={part === 'complementary'}
             {...(pending && { classNames: 'text-description' })}
           >
             {label}
           </StackItem.HeadingLabel>
         </TextTooltip>
-        {node && layoutPart !== 'complementary' && (
-          // TODO(Zan): What are we doing with layout coordinate here?
-          <Surface role='navbar-end' direction='inline-reverse' data={{ object: node.data }} />
-        )}
-        {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
+        {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
         <PlankControls
           capabilities={capabilities}
-          isSolo={layoutPart === 'solo'}
-          classNames='mx-1'
-          onClick={(eventType) => {
-            if (!layoutPart) {
-              return;
-            }
-
-            // TODO(Zan): Update this to use the new layout actions.
-            if (eventType === 'solo') {
-              return dispatch([
-                {
-                  action: NavigationAction.ADJUST,
-                  data: { type: eventType, layoutCoordinate: { part: 'main', entryId: coordinate.entryId } },
-                },
-              ]);
-            } else if (eventType === 'close') {
-              if (layoutPart === 'complementary') {
-                return dispatch({
-                  action: LayoutAction.SET_LAYOUT,
-                  data: {
-                    element: 'complementary',
-                    state: false,
-                  },
-                });
-              } else {
-                return dispatch({
-                  action: NavigationAction.CLOSE,
-                  data: {
-                    activeParts: {
-                      [layoutPart]: [coordinate.entryId],
-                    },
-                  },
-                });
-              }
-            } else {
-              return dispatch({
-                action: NavigationAction.ADJUST,
-                data: { type: eventType, layoutCoordinate: coordinate },
-              });
-            }
-          }}
-          close={layoutPart === 'complementary' ? 'minify-end' : true}
-        >
-          {/* TODO(wittjosiah): This doesn't behave exactly the same as the rest of the button group. */}
-          {layoutPart !== 'complementary' && (
-            <IconButton
-              iconOnly
-              onClick={() => (layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen)}
-              variant='ghost'
-              label={t('open complementary sidebar label')}
-              classNames='!pli-2 !plb-3 [&>svg]:-scale-x-100'
-              icon='ph--sidebar-simple--regular'
-              size={4}
-              tooltipZIndex='70'
-            />
-          )}
-        </PlankControls>
+          isSolo={part === 'solo'}
+          onClick={handlePlankAction}
+          close={part === 'complementary' ? 'minify-end' : true}
+        />
       </StackItem.Heading>
     );
   },