@dxos/plugin-deck 0.6.14-staging.54a8bab → 0.6.14-staging.7b35391

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,17 +17,15 @@ 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';
 
@@ -42,12 +37,11 @@ export type PlankProps = {
   // 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();
@@ -55,7 +49,8 @@ export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled,
   const { graph } = useGraph();
   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(coordinate.entryId);
   const index = indexInPart(layoutParts, coordinate);
@@ -65,11 +60,9 @@ export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled,
 
   const size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
-    debounce(
-      (newSize: number) =>
-        dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: newSize } }),
-      200,
-    ),
+    debounce((nextSize: number) => {
+      return dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: nextSize } });
+    }, 200),
     [dispatch, coordinate.entryId],
   );
 
@@ -88,10 +81,7 @@ export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled,
   }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isSuppressed =
-    (layoutMode === 'solo' && part !== 'solo') ||
-    (layoutMode === 'deck' && part === 'solo') ||
-    coordinate.entryId === UNKNOWN_ID;
+  const isAttendable = isSolo || (layoutMode === 'deck' && part === 'main');
 
   const sizeAttrs = useMainSize();
 
@@ -108,78 +98,47 @@ export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled,
   // 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/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,7 +34,14 @@ 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',

package/src/util/overscroll.ts

@@ -4,9 +4,6 @@
 
 import type { CSSProperties } from 'react';
 
-import { type LayoutEntry } from '@dxos/app-framework';
-import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
-
 /**
  * ┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
  * | Overscroll Padding Calculation for Centering Planks on Screen.                                     │
@@ -52,39 +49,21 @@ import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
  * └────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
 export const calculateOverscroll = (
-  planks: LayoutEntry[] | undefined,
-  plankSizing: Record<string, number>,
-  sidebarOpen: boolean,
-  complementarySidebarOpen: boolean,
+  planksCount: number,
 ): Pick<CSSProperties, 'paddingInlineStart' | 'paddingInlineEnd'> | undefined => {
-  if (!planks?.length) {
+  if (!planksCount) {
     return { paddingInlineStart: 0, paddingInlineEnd: 0 };
   }
-
-  // TODO(Zan): Move complementary sidebar size (360px), sidebar size (270px), plank resize handle size (20px) to CSS variables.
-  const sidebarWidth = sidebarOpen ? '270px' : '0px';
-  const complementarySidebarWidth = complementarySidebarOpen ? '360px' : '0px';
-
-  const getPlankSize = (id: string) => (plankSizing[id] ?? PLANK_DEFAULTS.size).toFixed(2) + 'rem';
-
-  if (planks.length === 1) {
-    // Center the plank in the content area.
-    const plank = planks[0];
-    const plankSize = getPlankSize(plank.id);
-    const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
-
+  if (planksCount === 1) {
+    const overscrollPadding =
+      'max(0px, calc(((100dvw - var(--dx-main-sidebarWidth) - var(--dx-main-complementaryWidth) - (var(--dx-main-contentFirstWidth) + 1px)) / 2)))';
     return { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
   } else {
-    // Center the plank on the screen.
-    const first = planks[0];
-    const firstSize = getPlankSize(first.id);
-
-    const last = planks[planks.length - 1];
-    const lastSize = getPlankSize(last.id);
-
     return {
-      paddingInlineStart: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
-      paddingInlineEnd: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
+      paddingInlineStart:
+        'max(0px, calc(((100dvw - (var(--dx-main-contentFirstWidth) + 1px)) / 2) - var(--dx-main-sidebarWidth)))',
+      paddingInlineEnd:
+        'max(0px, calc(((100dvw - (var(--dx-main-contentLastWidth) + 1px)) / 2) - var(--dx-main-complementaryWidth)))',
     };
   }
 };