@dxos/plugin-deck 0.6.14-main.f49f251 → 0.6.14-staging.4b6f9cf

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -13,11 +13,13 @@ import {
   type LayoutCoordinate,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { PlankHeading, type PlankHeadingAction } from '@dxos/react-ui-deck';
+import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation, IconButton } 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';
 
 export type NodePlankHeadingProps = {
   coordinate: LayoutCoordinate;
@@ -26,8 +28,7 @@ export type NodePlankHeadingProps = {
   canIncrementEnd?: boolean;
   popoverAnchorId?: string;
   pending?: boolean;
-  flatDeck?: boolean;
-  actions?: PlankHeadingAction[];
+  actions?: StackItemSigilAction[];
 };
 
 export const NodePlankHeading = memo(
@@ -38,9 +39,9 @@ export const NodePlankHeading = memo(
     canIncrementEnd,
     popoverAnchorId,
     pending,
-    flatDeck,
     actions = [],
   }: NodePlankHeadingProps) => {
+    const layoutContext = useLayout();
     const { t } = useTranslation(DECK_PLUGIN);
     const { graph } = useGraph();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
@@ -73,12 +74,10 @@ export const NodePlankHeading = memo(
     );
 
     return (
-      <PlankHeading.Root
-        {...((layoutPart !== 'main' || !flatDeck) && { classNames: 'pie-1 border-b border-separator' })}
-      >
+      <StackItem.Heading classNames='pie-1'>
         <ActionRoot>
           {node ? (
-            <PlankHeading.ActionsMenu
+            <StackItem.Sigil
               icon={icon}
               related={layoutPart === 'complementary'}
               attendableId={attendableId}
@@ -89,31 +88,32 @@ export const NodePlankHeading = memo(
               }
             >
               <Surface role='menu-footer' data={{ object: node.data }} />
-            </PlankHeading.ActionsMenu>
+            </StackItem.Sigil>
           ) : (
-            <PlankHeading.Button>
+            <StackItem.SigilButton>
               <span className='sr-only'>{label}</span>
               <Icon icon={icon} size={5} />
-            </PlankHeading.Button>
+            </StackItem.SigilButton>
           )}
         </ActionRoot>
         <TextTooltip text={label} onlyWhenTruncating>
-          <PlankHeading.Label
+          <StackItem.HeadingLabel
             attendableId={attendableId}
             related={layoutPart === 'complementary'}
             {...(pending && { classNames: 'text-description' })}
           >
             {label}
-          </PlankHeading.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 */}
-        <PlankHeading.Controls
+        <PlankControls
           capabilities={capabilities}
           isSolo={layoutPart === 'solo'}
+          classNames='mx-1'
           onClick={(eventType) => {
             if (!layoutPart) {
               return;
@@ -154,8 +154,21 @@ export const NodePlankHeading = memo(
             }
           }}
           close={layoutPart === 'complementary' ? 'minify-end' : true}
-        />
-      </PlankHeading.Root>
+        >
+          {/* 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='!p-1 -scale-x-100'
+              icon='ph--sidebar--regular'
+              tooltipZIndex='70'
+            />
+          )}
+        </PlankControls>
+      </StackItem.Heading>
     );
   },
 );

package/src/components/DeckLayout/Plank.tsx

@@ -2,16 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Plus } from '@phosphor-icons/react';
 import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 import {
-  LayoutAction,
   type LayoutCoordinate,
   type LayoutEntry,
   type LayoutPart,
   type LayoutParts,
-  NavigationAction,
   Surface,
   useIntentDispatcher,
   type Layout,
@@ -20,53 +17,53 @@ import {
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
-import { Button, Tooltip, useTranslation } from '@dxos/react-ui';
 import { useAttendableAttributes } from '@dxos/react-ui-attention';
-import { Plank as NaturalPlank } from '@dxos/react-ui-deck';
-import { mainIntrinsicSize } from '@dxos/react-ui-theme';
+import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
+import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 
 import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { DeckAction } from '../../DeckPlugin';
 import { useNode, useMainSize } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
 import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
+const UNKNOWN_ID = 'unknown_id';
+
 export type PlankProps = {
-  entry: LayoutEntry;
+  entry?: LayoutEntry;
   layoutParts: LayoutParts;
-  // TODO(wittjosiah): Remove.
+  // TODO(wittjosiah): Remove. Pass in LayoutCoordinate instead of LayoutEntry.
   part: LayoutPart;
   layoutMode: Layout['layoutMode'];
-  flatDeck?: boolean;
-  searchEnabled?: boolean;
+  order?: number;
+  last?: boolean;
 };
 
-export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }: PlankProps) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+export const Plank = memo(({ entry, layoutParts, part, layoutMode, order, last }: PlankProps) => {
   const dispatch = useIntentDispatcher();
+  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry?.id ?? UNKNOWN_ID }), [entry?.id, part]);
   const { popoverAnchorId, scrollIntoView } = useLayout();
   const { plankSizing } = useDeckContext();
   const { graph } = useGraph();
-  const node = useNode(graph, entry.id);
+  const node = useNode(graph, entry?.id);
   const rootElement = useRef<HTMLDivElement | null>(null);
-  const resizeable = layoutMode === 'deck';
+  const canResize = layoutMode === 'deck';
+  const Root = part === 'solo' ? 'article' : StackItem.Root;
 
-  const attendableAttrs = useAttendableAttributes(entry.id);
-  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry.id }), [entry.id, part]);
+  const attendableAttrs = useAttendableAttributes(coordinate.entryId);
   const index = indexInPart(layoutParts, coordinate);
   const length = partLength(layoutParts, part);
   const canIncrementStart = part === 'main' && index !== undefined && index > 0 && length !== undefined && length > 1;
   const canIncrementEnd = part === 'main' && index !== undefined && index < length - 1 && length !== undefined;
 
-  const size = plankSizing?.[entry.id] as number | undefined;
+  const size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
-    debounce((newSize: number) => {
-      void dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: entry.id, size: newSize } });
+    debounce((nextSize: number) => {
+      return dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: nextSize } });
     }, 200),
-    [dispatch, entry.id],
+    [dispatch, coordinate.entryId],
   );
 
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
@@ -77,102 +74,71 @@ export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled,
   }, []);
 
   useLayoutEffect(() => {
-    if (scrollIntoView === entry.id) {
+    if (scrollIntoView === coordinate.entryId) {
       rootElement.current?.focus({ preventScroll: true });
       layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
     }
-  }, [scrollIntoView, layoutMode]);
+  }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isSuppressed = (layoutMode === 'solo' && part !== 'solo') || (layoutMode === 'deck' && part === 'solo');
+  const isAttendable = isSolo || (layoutMode === 'deck' && part === 'main');
 
   const sizeAttrs = useMainSize();
 
   const data = useMemo(
     () =>
       node && {
-        ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        ...(entry?.path ? { subject: node.data, path: entry.path } : { object: node.data }),
         coordinate,
         popoverAnchorId,
       },
-    [node],
+    [node, node?.data, entry?.path, coordinate, 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 divide-separator divide-y',
+    last && '!border-li border-separator',
+  );
+
   return (
-    <NaturalPlank.Root
-      size={size}
-      setSize={setSize}
-      classNames={[isSuppressed && '!sr-only']}
-      {...attendableAttrs}
-      {...(isSuppressed && { inert: '' })}
-      onKeyDown={handleKeyDown}
+    <Root
       ref={rootElement}
+      data-testid='deck.plank'
+      tabIndex={0}
+      {...(part === 'solo'
+        ? ({ ...sizeAttrs, className } as any)
+        : {
+            item: { id: entry?.id ?? 'never' },
+            size,
+            onSizeChange: setSize,
+            classNames: className,
+            order,
+            role: 'article',
+          })}
+      {...(isAttendable ? attendableAttrs : {})}
+      onKeyDown={handleKeyDown}
     >
-      <NaturalPlank.Content
-        {...(isSolo && sizeAttrs)}
-        classNames={[isSolo && mainIntrinsicSize, !flatDeck && 'bg-base']}
-        style={isSolo ? { inlineSize: '' } : {}}
-      >
-        {node ? (
-          <>
-            <NodePlankHeading
-              coordinate={coordinate}
-              node={node}
-              canIncrementStart={canIncrementStart}
-              canIncrementEnd={canIncrementEnd}
-              popoverAnchorId={popoverAnchorId}
-              flatDeck={flatDeck}
-            />
-            <Surface role='article' data={data} limit={1} fallback={PlankContentError} placeholder={placeholder} />
-          </>
-        ) : (
-          <PlankError layoutCoordinate={coordinate} flatDeck={flatDeck} />
-        )}
-      </NaturalPlank.Content>
-      {searchEnabled && resizeable ? (
-        <div role='none' className='grid grid-rows-subgrid row-span-3'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                data-testid='plankHeading.open'
-                variant='ghost'
-                classNames='p-1 w-fit'
-                onClick={() =>
-                  dispatch([
-                    {
-                      action: LayoutAction.SET_LAYOUT,
-                      data: {
-                        element: 'dialog',
-                        component: 'dxos.org/plugin/search/Dialog',
-                        dialogBlockAlign: 'start',
-                        subject: {
-                          action: NavigationAction.SET,
-                          position: 'add-after',
-                          coordinate,
-                        },
-                      },
-                    },
-                  ])
-                }
-              >
-                <span className='sr-only'>{t('insert plank label')}</span>
-                <Plus />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content side='bottom' classNames='z-[70]'>
-                {t('insert plank label')}
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-          <NaturalPlank.ResizeHandle classNames='row-start-[toolbar-start] row-end-[content-end]' />
-        </div>
-      ) : resizeable ? (
-        <NaturalPlank.ResizeHandle classNames='row-span-3' />
-      ) : null}
-    </NaturalPlank.Root>
+      {node ? (
+        <>
+          <NodePlankHeading
+            coordinate={coordinate}
+            node={node}
+            canIncrementStart={canIncrementStart}
+            canIncrementEnd={canIncrementEnd}
+            popoverAnchorId={popoverAnchorId}
+          />
+          <Surface role='article' data={data} limit={1} fallback={PlankContentError} placeholder={placeholder} />
+        </>
+      ) : (
+        <PlankError layoutCoordinate={coordinate} />
+      )}
+      {canResize && <StackItem.ResizeHandle />}
+    </Root>
   );
 });

package/src/components/DeckLayout/PlankControls.tsx

@@ -0,0 +1,133 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import {
+  Button,
+  ButtonGroup,
+  type ButtonGroupProps,
+  type ButtonProps,
+  Icon,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+
+import { DECK_PLUGIN } from '../../meta';
+
+export type PlankControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
+export type PlankControlHandler = (event: PlankControlEvent) => void;
+
+export type PlankCapabilities = {
+  incrementStart?: boolean;
+  incrementEnd?: boolean;
+  solo?: boolean;
+};
+
+export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
+  onClick?: PlankControlHandler;
+  variant?: 'hide-disabled' | 'default';
+  close?: boolean | 'minify-start' | 'minify-end';
+  capabilities: PlankCapabilities;
+  isSolo?: boolean;
+  pin?: 'start' | 'end' | 'both';
+};
+
+const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button variant='ghost' {...props}>
+          <span className='sr-only'>{label}</span>
+          <Icon icon={icon} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom' classNames='z-[70]'>
+          {label}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+// TODO(wittjosiah): Duplicate of stack LayoutControls?
+//   Translations were to be duplicated between packages.
+export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
+  (
+    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(DECK_PLUGIN);
+    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !p-1' : '!p-1';
+
+    return (
+      <ButtonGroup {...props} ref={forwardedRef}>
+        {pin && !isSolo && ['both', 'start'].includes(pin) && (
+          <PlankControl
+            label={t('pin start label')}
+            variant='ghost'
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('pin-start')}
+            icon='ph--caret-line-left--regular'
+          />
+        )}
+
+        {can.solo && (
+          <PlankControl
+            label={t('solo plank label')}
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('solo')}
+            icon={isSolo ? 'ph--arrows-in--regular' : 'ph--arrows-out--regular'}
+          />
+        )}
+
+        {!isSolo && can.solo && (
+          <>
+            <PlankControl
+              label={t('increment start label')}
+              disabled={!can.incrementStart}
+              classNames={buttonClassNames}
+              onClick={() => onClick?.('increment-start')}
+              icon='ph--caret-left--regular'
+            />
+            <PlankControl
+              label={t('increment end label')}
+              disabled={!can.incrementEnd}
+              classNames={buttonClassNames}
+              onClick={() => onClick?.('increment-end')}
+              icon='ph--caret-right--regular'
+            />
+          </>
+        )}
+
+        {pin && !isSolo && ['both', 'end'].includes(pin) && (
+          <PlankControl
+            label={t('pin end label')}
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('pin-end')}
+            icon='ph--caret-line-right--regular'
+          />
+        )}
+
+        {close && !isSolo && (
+          <PlankControl
+            label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('close')}
+            data-testid='plankHeading.close'
+            icon={
+              close === 'minify-start'
+                ? 'ph--caret-line-left--regular'
+                : close === 'minify-end'
+                  ? 'ph--caret-line-right--regular'
+                  : 'ph--minus--regular'
+            }
+          />
+        )}
+        {children}
+      </ButtonGroup>
+    );
+  },
+);

package/src/components/DeckLayout/PlankError.tsx

@@ -15,18 +15,18 @@ import { DECK_PLUGIN } from '../../meta';
 
 export const PlankContentError = ({ error }: { error?: Error }) => {
   const { t } = useTranslation(DECK_PLUGIN);
+  const errorString = error?.toString() ?? '';
   return (
-    <div role='none' className='grid place-items-center row-span-2'>
+    <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
       <p
         role='alert'
         className={mx(
           descriptionText,
-          // TODO(burdon): Factor out common styles for all dialogs.
-          'overflow-hidden break-words',
-          'place-self-center border border-dashed border-neutral-400/50 rounded-lg text-center p-8 font-normal text-lg',
+          'break-words border border-dashed border-separator rounded-lg p-8',
+          errorString.length < 256 && 'text-lg',
         )}
       >
-        {error ? error.toString() : t('error fallback message')}
+        {error ? errorString : t('error fallback message')}
       </p>
     </div>
   );
@@ -36,12 +36,10 @@ export const PlankError = ({
   layoutCoordinate,
   node,
   error,
-  flatDeck,
 }: {
   layoutCoordinate: LayoutCoordinate;
   node?: Node;
   error?: Error;
-  flatDeck?: boolean;
 }) => {
   const [timedOut, setTimedOut] = useState(false);
   useEffect(() => {
@@ -49,7 +47,7 @@ export const PlankError = ({
   }, []);
   return (
     <>
-      <NodePlankHeading coordinate={layoutCoordinate} node={node} pending={!timedOut} flatDeck={flatDeck} />
+      <NodePlankHeading coordinate={layoutCoordinate} node={node} pending={!timedOut} />
       {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
     </>
   );

package/src/components/DeckLayout/PlankLoading.tsx

@@ -8,7 +8,7 @@ import { Status } from '@dxos/react-ui';
 
 export const PlankLoading = () => {
   return (
-    <div role='none' className='grid bs-[100dvh] place-items-center row-span-2'>
+    <div role='none' className='grid place-items-center attention-surface'>
       <Status indeterminate aria-label='Initializing' />
     </div>
   );

package/src/components/DeckLayout/Toast.tsx

@@ -24,7 +24,7 @@ export const Toast = ({
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
       <NaturalToast.Body>
         <NaturalToast.Title classNames='items-center'>
-          <Icon icon={icon} size={5} classNames='inline mr-1' />
+          {icon && <Icon icon={icon} size={5} classNames='inline mr-1' />}
           <span>{title}</span>
         </NaturalToast.Title>
         {description && <NaturalToast.Description>{description}</NaturalToast.Description>}

package/src/components/LayoutSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { FormInput } from '@dxos/react-ui-data';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 
 import { DECK_PLUGIN } from '../meta';
 import {
@@ -23,7 +23,7 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
 
   return (
     <>
-      <FormInput label={t('select new plank positioning label')}>
+      <DeprecatedFormInput label={t('select new plank positioning label')}>
         <Select.Root
           value={settings.newPlankPositioning ?? 'start'}
           onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
@@ -41,8 +41,8 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </FormInput>
-      <FormInput label={t('settings overscroll label')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings overscroll label')}>
         <Select.Root
           value={settings.overscroll ?? 'none'}
           onValueChange={(value) => (settings.overscroll = value as Overscroll)}
@@ -60,24 +60,24 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </FormInput>
-      <FormInput label={t('settings show hints label')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings show hints label')}>
         <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
-      </FormInput>
+      </DeprecatedFormInput>
       {!isSocket && (
-        <FormInput label={t('settings native redirect label')}>
+        <DeprecatedFormInput label={t('settings native redirect label')}>
           <Input.Switch
             checked={settings.enableNativeRedirect}
             onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
           />
-        </FormInput>
+        </DeprecatedFormInput>
       )}
-      <FormInput label={t('settings custom slots')}>
+      <DeprecatedFormInput label={t('settings custom slots')}>
         <Input.Switch checked={settings.customSlots} onCheckedChange={(checked) => (settings.customSlots = checked)} />
-      </FormInput>
-      <FormInput label={t('settings flat deck')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings flat deck')}>
         <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = checked)} />
-      </FormInput>
+      </DeprecatedFormInput>
     </>
   );
 };

package/src/translations.ts

@@ -1,6 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
+
 import { DECK_PLUGIN } from './meta';
 
 export default [
@@ -8,8 +9,8 @@ export default [
     'en-US': {
       [DECK_PLUGIN]: {
         'main header label': 'Main header',
-        'open navigation sidebar label': 'Open navigation sidebar.',
-        'open complementary sidebar label': 'Open complementary sidebar.',
+        'open navigation sidebar label': 'Open navigation sidebar',
+        'open complementary sidebar label': 'Open complementary sidebar',
         'plugin error message': 'Content failed to render.',
         'content fallback message': 'Unsupported',
         'content fallback description':
@@ -33,18 +34,19 @@ export default [
         'reload required message': 'Reload required.',
         'pending heading': 'Loading…',
         'insert plank label': 'Open',
-        'solo plank label': 'Solo',
+        'resize label': 'Drag to resize',
+        'pin start label': 'Pin to the left sidebar',
+        'pin end label': 'Pin to the right sidebar',
+        'increment start label': 'Move to the left',
+        'increment end label': 'Move to the right',
+        'solo plank label': 'Toggle solo mode',
+        'close label': 'Close',
+        'minify label': 'Minify',
         'settings overscroll label': 'Plank Overscrolling',
         'select overscroll placeholder': 'Select plank overscrolling behavior',
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
-
-        // ComplementarySidebar
-        'open settings label': 'Show settings',
-        'open comments label': 'Show Comments',
-        'open automation label': 'Show Automation',
-        'open debug label': 'Show Debug',
       },
     },
   },