@dxos/plugin-deck 0.8.0 → 0.8.1-main.013e445

package/src/components/DeckLayout/DeckLayout.tsx

@@ -19,9 +19,9 @@ import {
   Dialog as NaturalDialog,
   Main,
   Popover,
-  useOnTransition,
   type MainProps,
   useMediaQuery,
+  useOnTransition,
 } from '@dxos/react-ui';
 import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
@@ -31,6 +31,7 @@ import { ComplementarySidebar } from './ComplementarySidebar';
 import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
 import { Plank } from './Plank';
+import { PlankContentError } from './PlankError';
 import { Sidebar } from './Sidebar';
 import { ToggleComplementarySidebarButton, ToggleSidebarButton } from './SidebarButton';
 import { StatusBar } from './StatusBar';
@@ -47,8 +48,8 @@ export type DeckLayoutProps = {
   onDismissToast: (id: string) => void;
 };
 
-const PlankSeparator = ({ index }: { index: number }) =>
-  index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
+const PlankSeparator = ({ order }: { order: number }) =>
+  order > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: order }} /> : null;
 
 export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -67,7 +68,7 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
     deck,
     toasts,
   } = context;
-  const { active, fullscreen, solo, plankSizing } = deck;
+  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
@@ -186,6 +187,17 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
   );
   const handlePopoverClose = useCallback(() => handlePopoverOpenChange(false), [handlePopoverOpenChange]);
 
+  const { order, itemsCount }: { order: Record<string, number>; itemsCount: number } = useMemo(() => {
+    return active.reduce(
+      (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
+        acc.order[entryId] = acc.itemsCount + 1;
+        acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
+        return acc;
+      },
+      { order: {}, itemsCount: 0 },
+    );
+  }, [active, activeCompanions]);
+
   return (
     <Popover.Root modal open={!!(popoverAnchorId && delayedPopoverVisibility)} onOpenChange={handlePopoverOpenChange}>
       <ActiveNode />
@@ -252,14 +264,21 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
                   size='contain'
                   classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
                   onScroll={handleScroll}
-                  itemsCount={2 * (active.length ?? 0) - 1}
+                  itemsCount={itemsCount - 1}
                   style={padding}
                   ref={deckRef}
                 >
-                  {active.map((entryId, index) => (
+                  {active.map((entryId) => (
                     <Fragment key={entryId}>
-                      <PlankSeparator index={index} />
-                      <Plank id={entryId} part='deck' order={index * 2 + 1} active={active} layoutMode={layoutMode} />
+                      <PlankSeparator order={order[entryId] - 1} />
+                      <Plank
+                        id={entryId}
+                        companionId={activeCompanions?.[entryId]}
+                        part='deck'
+                        order={order[entryId]}
+                        active={active}
+                        layoutMode={layoutMode}
+                      />
                     </Fragment>
                   ))}
                 </Stack>
@@ -272,7 +291,12 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
                 {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
                 {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
                 <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
-                  <Plank id={solo} part='solo' layoutMode={layoutMode} />
+                  <Plank
+                    id={solo}
+                    companionId={solo ? activeCompanions?.[solo] : undefined}
+                    part='solo'
+                    layoutMode={layoutMode}
+                  />
                 </StackContext.Provider>
               </div>
             </Main.Content>
@@ -303,10 +327,11 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
         onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}
       >
         {dialogBlockAlign === 'end' ? (
-          <Surface role='dialog' data={dialogContent} limit={1} />
+          // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
+          <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
         ) : (
           <Dialog.Overlay blockAlign={dialogBlockAlign}>
-            <Surface role='dialog' data={dialogContent} limit={1} />
+            <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
           </Dialog.Overlay>
         )}
       </Dialog.Root>

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -10,21 +10,24 @@ 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 { PlankCompanionControls, PlankControls } from './PlankControls';
 import { DECK_PLUGIN } from '../../meta';
-import { DeckAction, SLUG_PATH_SEPARATOR } from '../../types';
+import { DeckAction, type ResolvedPart, SLUG_PATH_SEPARATOR } from '../../types';
 import { useBreakpoints } from '../../util';
 import { soloInlinePadding } from '../fragments';
 
 export type NodePlankHeadingProps = {
   id: string;
-  part: 'solo' | 'deck' | 'complementary';
+  part: ResolvedPart;
   node?: Node;
   canIncrementStart?: boolean;
   canIncrementEnd?: boolean;
   popoverAnchorId?: string;
   pending?: boolean;
   actions?: StackItemSigilAction[];
+  companioned?: 'primary' | 'companion';
+  primaryId?: string;
+  surfaceVariant?: string;
 };
 
 export const NodePlankHeading = memo(
@@ -37,6 +40,9 @@ export const NodePlankHeading = memo(
     popoverAnchorId,
     pending,
     actions = [],
+    companioned,
+    primaryId,
+    surfaceVariant,
   }: NodePlankHeadingProps) => {
     const { t } = useTranslation(DECK_PLUGIN);
     const { graph } = useAppGraph();
@@ -44,7 +50,14 @@ export const NodePlankHeading = memo(
     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);
+      : toLocalizedString(
+          (surfaceVariant
+            ? Array.isArray(node?.properties?.label)
+              ? [`${surfaceVariant} plank heading`, node.properties.label[1]]
+              : ['companion plank heading fallback label', { ns: DECK_PLUGIN }]
+            : node?.properties?.label) ?? ['plank heading fallback label', { ns: DECK_PLUGIN }],
+          t,
+        );
     const { dispatchPromise: dispatch } = useIntentDispatcher();
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
 
@@ -105,27 +118,30 @@ export const NodePlankHeading = memo(
         classNames={[
           'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag',
           part === 'solo' ? soloInlinePadding : 'pli-1',
+          surfaceVariant && 'pis-3',
         ]}
       >
-        <ActionRoot>
-          {node && sigilActions ? (
-            <StackItem.Sigil
-              icon={icon}
-              related={part === 'complementary'}
-              attendableId={attendableId}
-              triggerLabel={t('actions menu label')}
-              actions={sigilActions}
-              onAction={handleAction}
-            >
-              <Surface role='menu-footer' data={{ subject: node.data }} />
-            </StackItem.Sigil>
-          ) : (
-            <StackItem.SigilButton>
-              <span className='sr-only'>{label}</span>
-              <Icon icon={icon} size={5} />
-            </StackItem.SigilButton>
-          )}
-        </ActionRoot>
+        {!surfaceVariant && (
+          <ActionRoot>
+            {node && sigilActions ? (
+              <StackItem.Sigil
+                icon={icon}
+                related={part === 'complementary'}
+                attendableId={attendableId}
+                triggerLabel={t('actions menu label')}
+                actions={sigilActions}
+                onAction={handleAction}
+              >
+                <Surface role='menu-footer' data={{ subject: node.data }} />
+              </StackItem.Sigil>
+            ) : (
+              <StackItem.SigilButton>
+                <span className='sr-only'>{label}</span>
+                <Icon icon={icon} size={5} />
+              </StackItem.SigilButton>
+            )}
+          </ActionRoot>
+        )}
         <TextTooltip text={label} onlyWhenTruncating>
           <StackItem.HeadingLabel
             attendableId={attendableId}
@@ -136,12 +152,16 @@ export const NodePlankHeading = memo(
           </StackItem.HeadingLabel>
         </TextTooltip>
         {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
-        <PlankControls
-          capabilities={capabilities}
-          isSolo={part === 'solo'}
-          onClick={handlePlankAction}
-          close={part === 'complementary' ? 'minify-end' : true}
-        />
+        {companioned === 'companion' ? (
+          <PlankCompanionControls primary={surfaceVariant ? id : primaryId} />
+        ) : (
+          <PlankControls
+            capabilities={capabilities}
+            isSolo={part === 'solo'}
+            onClick={handlePlankAction}
+            close={part === 'complementary' ? 'minify-end' : true}
+          />
+        )}
       </StackItem.Heading>
     );
   },

package/src/components/DeckLayout/Plank.tsx

@@ -2,7 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import React, {
+  Fragment,
+  type KeyboardEvent,
+  memo,
+  type PropsWithChildren,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import {
   createIntent,
@@ -17,133 +26,194 @@ import { useAttendableAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
 import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 
-import { NodePlankHeading, type NodePlankHeadingProps } from './NodePlankHeading';
+import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { DeckCapabilities } from '../../capabilities';
 import { useNode, useMainSize } from '../../hooks';
-import { DeckAction, type LayoutMode } from '../../types';
+import { DeckAction, type LayoutMode, type Part, type ResolvedPart, surfaceVariantSeparator } from '../../types';
 
 const UNKNOWN_ID = 'unknown_id';
 
 export type PlankProps = {
   id?: string;
-  part: NodePlankHeadingProps['part'];
+  companionId?: string;
+  part: Part;
   path?: string[];
   order?: number;
   active?: string[];
   layoutMode: LayoutMode;
 };
 
-export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutMode }: PlankProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
-  const rootElement = useRef<HTMLDivElement | null>(null);
-  const canResize = layoutMode === 'deck';
-  const Root = part === 'solo' ? 'article' : StackItem.Root;
-
-  const attendableAttrs = useAttendableAttributes(id);
-  const index = active ? active.findIndex((entryId) => entryId === id) : 0;
-  const length = active?.length ?? 1;
-  const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
-  const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
-
-  const key = id.split('+')[0];
-  const size = deck.plankSizing[key] as number | undefined;
-  const setSize = useCallback(
-    debounce((nextSize: number) => {
-      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: key, size: nextSize }));
-    }, 200),
-    [dispatch, key],
-  );
-
-  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.target === event.currentTarget && event.key === 'Escape') {
-      rootElement.current?.closest('main')?.focus();
-    }
-  }, []);
-
-  useLayoutEffect(() => {
-    if (scrollIntoView === id) {
-      // TODO(wittjosiah): When focused on page load, the focus is always visible.
-      //   Forcing focus to something smaller than the plank prevents large focus ring in the interim.
-      const focusable = rootElement.current?.querySelector('button') || rootElement.current;
-      focusable?.focus({ preventScroll: true });
-      layoutMode === 'deck' && focusable?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
-      // Clear the scroll into view state once it has been actioned.
-      void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: undefined }));
-    }
-  }, [id, scrollIntoView, layoutMode]);
-
-  const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isAttendable = isSolo || (layoutMode === 'deck' && part === 'deck');
+type PlankImplProps = Omit<PlankProps, 'companionId' | 'part'> & {
+  part: ResolvedPart;
+  surfaceVariant?: string;
+  companioned?: 'primary' | 'companion';
+  primaryId?: string;
+};
 
+const PlankImpl = memo(
+  ({
+    id = UNKNOWN_ID,
+    part,
+    path,
+    order,
+    active,
+    layoutMode,
+    surfaceVariant,
+    companioned,
+    primaryId,
+  }: PlankImplProps) => {
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
+    const { graph } = useAppGraph();
+    const node = useNode(graph, id);
+    const rootElement = useRef<HTMLDivElement | null>(null);
+    const canResize = layoutMode === 'deck';
+    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
+
+    const attendableAttrs = useAttendableAttributes(id);
+    const index = active ? active.findIndex((entryId) => entryId === id) : 0;
+    const length = active?.length ?? 1;
+    const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
+    const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
+
+    const sizeKey = `${id.split('+')[0]}${surfaceVariant ? `${surfaceVariantSeparator}${surfaceVariant}` : ''}`;
+    const size = deck.plankSizing[sizeKey] as number | undefined;
+    const setSize = useCallback(
+      debounce((nextSize: number) => {
+        return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: sizeKey, size: nextSize }));
+      }, 200),
+      [dispatch, sizeKey],
+    );
+
+    // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+    const handleKeyDown = useCallback((event: KeyboardEvent) => {
+      if (event.target === event.currentTarget && event.key === 'Escape') {
+        rootElement.current?.closest('main')?.focus();
+      }
+    }, []);
+
+    useLayoutEffect(() => {
+      if (scrollIntoView === id) {
+        // TODO(wittjosiah): When focused on page load, the focus is always visible.
+        //   Forcing focus to something smaller than the plank prevents large focus ring in the interim.
+        const focusable = rootElement.current?.querySelector('button') || rootElement.current;
+        focusable?.focus({ preventScroll: true });
+        layoutMode === 'deck' && focusable?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+        // Clear the scroll into view state once it has been actioned.
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: undefined }));
+      }
+    }, [id, scrollIntoView, layoutMode]);
+
+    const isSolo = layoutMode === 'solo' && part === 'solo';
+    const isAttendable = isSolo || (layoutMode === 'deck' && part === 'deck');
+
+    const sizeAttrs = useMainSize();
+
+    const data = useMemo(
+      () =>
+        node && {
+          subject: node.data,
+          variant: surfaceVariant,
+          path,
+          popoverAnchorId,
+        },
+      [node, node?.data, path, popoverAnchorId, surfaceVariant],
+    );
+
+    // TODO(wittjosiah): Change prop to accept a component.
+    const placeholder = useMemo(() => <PlankLoading />, []);
+
+    const className = mx(
+      'attention-surface relative',
+      isSolo && mainIntrinsicSize,
+      isSolo && railGridHorizontal,
+      isSolo && 'grid absolute inset-0',
+      part === 'deck' && (companioned === 'companion' ? '!border-separator border-ie' : '!border-separator border-li'),
+      part.startsWith('solo-') && 'row-span-2 min-is-0',
+      part === 'solo-companion' && '!border-separator border-is',
+    );
+
+    return (
+      <Root
+        ref={rootElement}
+        data-testid='deck.plank'
+        tabIndex={0}
+        {...(part.startsWith('solo')
+          ? ({ ...sizeAttrs, className } as any)
+          : {
+              item: { id },
+              size,
+              onSizeChange: setSize,
+              classNames: className,
+              order,
+              role: 'article',
+            })}
+        {...(isAttendable ? attendableAttrs : {})}
+        onKeyDown={handleKeyDown}
+      >
+        {node ? (
+          <>
+            <NodePlankHeading
+              id={id}
+              part={part.startsWith('solo-') ? 'solo' : part}
+              node={node}
+              canIncrementStart={canIncrementStart}
+              canIncrementEnd={canIncrementEnd}
+              popoverAnchorId={popoverAnchorId}
+              companioned={companioned}
+              primaryId={primaryId}
+              surfaceVariant={surfaceVariant}
+            />
+            <Surface
+              key={node.id}
+              role='article'
+              data={data}
+              limit={1}
+              fallback={PlankContentError}
+              placeholder={placeholder}
+            />
+          </>
+        ) : (
+          <PlankError id={id} part={part} />
+        )}
+        {canResize && <StackItem.ResizeHandle />}
+      </Root>
+    );
+  },
+);
+
+const SplitFrame = ({ children }: PropsWithChildren<{}>) => {
   const sizeAttrs = useMainSize();
-
-  const data = useMemo(
-    () =>
-      node && {
-        subject: node.data,
-        path,
-        popoverAnchorId,
-      },
-    [node, node?.data, path, popoverAnchorId],
-  );
-
-  // TODO(wittjosiah): Change prop to accept a component.
-  const placeholder = useMemo(() => <PlankLoading />, []);
-
-  const className = mx(
-    'attention-surface relative',
-    isSolo && mainIntrinsicSize,
-    isSolo && railGridHorizontal,
-    isSolo ? 'grid absolute inset-0' : '!border-separator border-li',
-  );
-
   return (
-    <Root
-      ref={rootElement}
-      data-testid='deck.plank'
-      tabIndex={0}
-      {...(part === 'solo'
-        ? ({ ...sizeAttrs, className } as any)
-        : {
-            item: { id },
-            size,
-            onSizeChange: setSize,
-            classNames: className,
-            order,
-            role: 'article',
-          })}
-      {...(isAttendable ? attendableAttrs : {})}
-      onKeyDown={handleKeyDown}
+    <div
+      role='none'
+      className={mx('grid grid-cols-[1fr_1fr] absolute inset-0', railGridHorizontal, mainIntrinsicSize)}
+      {...sizeAttrs}
     >
-      {node ? (
-        <>
-          <NodePlankHeading
-            id={id}
-            part={part}
-            node={node}
-            canIncrementStart={canIncrementStart}
-            canIncrementEnd={canIncrementEnd}
-            popoverAnchorId={popoverAnchorId}
-          />
-          <Surface
-            key={node.id}
-            role='article'
-            data={data}
-            limit={1}
-            fallback={PlankContentError}
-            placeholder={placeholder}
-          />
-        </>
-      ) : (
-        <PlankError id={id} part={part} />
-      )}
-      {canResize && <StackItem.ResizeHandle />}
-    </Root>
+      {children}
+    </div>
   );
-});
+};
+
+export const Plank = (props: PlankProps) => {
+  if (props.companionId) {
+    const Root = props.part === 'solo' ? SplitFrame : Fragment;
+    return (
+      <Root>
+        <PlankImpl {...props} {...(props.part === 'solo' ? { part: 'solo-primary' } : {})} companioned='primary' />
+        <PlankImpl
+          {...props}
+          {...(props.companionId.startsWith(surfaceVariantSeparator)
+            ? { surfaceVariant: props.companionId.substring(2) }
+            : { id: props.companionId, primaryId: props.id })}
+          {...(props.part === 'solo' ? { part: 'solo-companion' } : { order: props.order! + 1 })}
+          companioned='companion'
+        />
+      </Root>
+    );
+  } else {
+    return <PlankImpl {...props} />;
+  }
+};

package/src/components/DeckLayout/PlankControls.tsx

@@ -2,8 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import {
   Button,
   ButtonGroup,
@@ -15,7 +17,7 @@ import {
 } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';
-import { type DeckAction } from '../../types';
+import { DeckAction } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
@@ -50,6 +52,34 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
   );
 };
 
+const plankControlSpacing = 'pli-2 plb-3';
+
+type PlankComplimentControlsProps = {
+  primary?: string;
+};
+
+export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankComplimentControlsProps>(
+  ({ primary }, forwardedRef) => {
+    const { t } = useTranslation(DECK_PLUGIN);
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const handleCloseCompanion = useCallback(() => {
+      invariant(primary);
+      return dispatch(createIntent(DeckAction.ChangeCompanion, { primary, companion: null }));
+    }, []);
+    return (
+      <div ref={forwardedRef} className='contents app-no-drag'>
+        <PlankControl
+          label={t('close companion label')}
+          variant='ghost'
+          icon='ph--minus--regular'
+          onClick={handleCloseCompanion}
+          classNames={plankControlSpacing}
+        />
+      </div>
+    );
+  },
+);
+
 // TODO(wittjosiah): Duplicate of stack LayoutControls?
 //   Translations were to be duplicated between packages.
 // NOTE(thure): Pinning & unpinning are disabled indefinitely.
@@ -59,7 +89,8 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
     forwardedRef,
   ) => {
     const { t } = useTranslation(DECK_PLUGIN);
-    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden pli-2 plb-3' : 'pli-2 plb-3';
+    const buttonClassNames =
+      variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 
     return (
       <ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>

package/src/components/LayoutSettings.tsx

@@ -72,10 +72,10 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
           />
         </DeprecatedFormInput>
       )}
-      <DeprecatedFormInput label={t('settings enable ide-style statusbar label')}>
+      <DeprecatedFormInput label={t('settings enable statusbar label')}>
         <Input.Switch
-          checked={settings.enableIdeStyleStatusbar}
-          onCheckedChange={(checked) => (settings.enableIdeStyleStatusbar = checked)}
+          checked={settings.enableStatusbar}
+          onCheckedChange={(checked) => (settings.enableStatusbar = checked)}
         />
       </DeprecatedFormInput>
     </DeprecatedFormContainer>

package/src/meta.ts

@@ -6,8 +6,8 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const DECK_PLUGIN = 'dxos.org/plugin/deck' as const;
 
-export const meta = {
+export const meta: PluginMeta = {
   id: DECK_PLUGIN,
   name: 'Deck',
   icon: 'ph--columns--regular',
-} satisfies PluginMeta;
+};

package/src/translations.ts

@@ -47,14 +47,15 @@ export default [
         'show solo plank label': 'Maximize',
         'close label': 'Close',
         'minify label': 'Minify',
-        'settings overscroll label': 'Plank overscrolling',
-        'select overscroll placeholder': 'Select plank overscrolling behavior',
+        'settings overscroll label': 'Plank scrolling',
+        'select overscroll placeholder': 'Select plank scrolling behavior',
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
-        'settings enable ide-style statusbar label': 'IDE-style statusbar',
+        'settings enable statusbar label': 'Show status bar',
         'close current label': 'Close current plank',
         'close others label': 'Close other planks',
         'close all label': 'Close all planks',
+        'companion plank heading fallback label': 'Related',
       },
     },
   },