@dxos/plugin-deck 0.6.8-main.046e6cf

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type LayoutParts, SLUG_PATH_SEPARATOR, Surface } from '@dxos/app-framework';
+import { useGraph } from '@dxos/plugin-graph';
+import { Main } from '@dxos/react-ui';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { deckGrid } from '@dxos/react-ui-deck';
+import { mx } from '@dxos/react-ui-theme';
+
+import { NodePlankHeading } from './NodePlankHeading';
+import { PlankContentError } from './PlankError';
+import { PlankLoading } from './PlankLoading';
+import { useNode, useNodeActionExpander } from '../../hooks';
+import { useLayout } from '../LayoutContext';
+
+export type ComplementarySidebarProps = {
+  id?: string;
+  layoutParts: LayoutParts;
+  flatDeck?: boolean;
+};
+
+export const ComplementarySidebar = ({ id, layoutParts, flatDeck }: ComplementarySidebarProps) => {
+  const { popoverAnchorId } = useLayout();
+  const { graph } = useGraph();
+  const node = useNode(graph, id);
+  // const complementaryAvailable = useMemo(() => id === NAV_ID || !!node, [id, node]);
+  const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR)[0] ?? 'never');
+
+  useNodeActionExpander(node);
+
+  return (
+    <Main.ComplementarySidebar {...complementaryAttrs}>
+      {node ? (
+        <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
+          <NodePlankHeading
+            node={node}
+            id={id}
+            layoutParts={layoutParts}
+            layoutPart='complementary'
+            popoverAnchorId={popoverAnchorId}
+            flatDeck={flatDeck}
+          />
+          <Surface
+            role='article'
+            data={{ subject: node.data, part: 'complementary', popoverAnchorId }}
+            limit={1}
+            fallback={PlankContentError}
+            placeholder={<PlankLoading />}
+          />
+        </div>
+      ) : null}
+    </Main.ComplementarySidebar>
+  );
+};

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+
+export const ContentEmpty = () => {
+  return (
+    <div
+      role='none'
+      className='min-bs-screen is-dvw sm:is-full flex items-center justify-center p-8'
+      data-testid='layoutPlugin.firstRunMessage'
+    >
+      <div role='none' className='grid place-items-center grid-rows-[min-content_min-content]'>
+        <Surface role='keyshortcuts' />
+      </div>
+    </div>
+  );
+};

package/src/components/DeckLayout/DeckLayout.tsx

@@ -0,0 +1,270 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Sidebar as MenuIcon } from '@phosphor-icons/react';
+import React, { useMemo } from 'react';
+
+import {
+  SLUG_PATH_SEPARATOR,
+  type Attention,
+  type LayoutParts,
+  Surface,
+  type Toast as ToastSchema,
+  firstIdInPart,
+  usePlugin,
+} from '@dxos/app-framework';
+import { Button, Dialog, Main, Popover, useTranslation } from '@dxos/react-ui';
+import { Deck } from '@dxos/react-ui-deck';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { ActiveNode } from './ActiveNode';
+import { ComplementarySidebar } from './ComplementarySidebar';
+import { ContentEmpty } from './ContentEmpty';
+import { Fullscreen } from './Fullscreen';
+import { Plank } from './Plank';
+import { Sidebar } from './Sidebar';
+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';
+
+export type DeckLayoutProps = {
+  showHintsFooter: boolean;
+  overscroll: Overscroll;
+  flatDeck?: boolean;
+  toasts: ToastSchema[];
+  onDismissToast: (id: string) => void;
+  layoutParts: LayoutParts;
+  attention: Attention;
+  // TODO(Zan): Deprecate slots.
+  slots?: {
+    wallpaper?: { classNames?: string };
+    deck?: { classNames?: string };
+    plank?: { classNames?: string };
+  };
+};
+
+export const DeckLayout = ({
+  showHintsFooter,
+  toasts,
+  onDismissToast,
+  flatDeck,
+  attention,
+  layoutParts,
+  slots,
+  overscroll,
+}: DeckLayoutProps) => {
+  const context = useLayout();
+  const {
+    layoutMode,
+    sidebarOpen,
+    complementarySidebarOpen,
+    dialogOpen,
+    dialogContent,
+    dialogBlockAlign,
+    popoverOpen,
+    popoverContent,
+    popoverAnchorId,
+  } = context;
+  const { t } = useTranslation(DECK_PLUGIN);
+  const { plankSizing } = useDeckContext();
+
+  const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
+
+  const complementarySlug = useMemo(() => {
+    const entry = layoutParts.complementary?.at(0);
+    if (entry) {
+      return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR}${entry.path}` : entry.id;
+    }
+  }, [layoutParts]);
+
+  const searchEnabled = !!usePlugin('dxos.org/plugin/search');
+  const activeId = useMemo(() => Array.from(attention.attended ?? [])[0], [attention.attended]);
+
+  const overscrollAmount = calculateOverscroll(
+    layoutMode,
+    sidebarOpen,
+    complementarySidebarOpen,
+    layoutParts,
+    plankSizing,
+    overscroll,
+  );
+
+  if (layoutMode === 'fullscreen') {
+    return <Fullscreen id={fullScreenSlug} />;
+  }
+
+  return (
+    <Popover.Root
+      modal
+      open={!!(popoverAnchorId && popoverOpen)}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen && popoverAnchorId) {
+          context.popoverOpen = true;
+        } else {
+          context.popoverOpen = false;
+          context.popoverAnchorId = undefined;
+        }
+      }}
+    >
+      <ActiveNode id={activeId} />
+
+      <Main.Root
+        navigationSidebarOpen={context.sidebarOpen}
+        onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
+        {...(complementarySidebarOpen !== null && {
+          complementarySidebarOpen: /* complementaryAvailable && */ context.complementarySidebarOpen as boolean,
+          onComplementarySidebarOpenChange: (next) => (context.complementarySidebarOpen = next),
+        })}
+      >
+        {/* Notch */}
+        <Main.Notch classNames='z-[21]'>
+          <Surface role='notch-start' />
+          <Button
+            // disabled={!sidebarAvailable}
+            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>
+          <Button
+            // disabled={!complementaryAvailable}
+            onClick={() => (context.complementarySidebarOpen = !context.complementarySidebarOpen)}
+            variant='ghost'
+            classNames='p-1'
+          >
+            <span className='sr-only'>{t('open complementary sidebar label')}</span>
+            <MenuIcon mirrored weight='light' className={getSize(5)} />
+          </Button>
+          <Surface role='notch-end' />
+        </Main.Notch>
+
+        {/* Sidebars */}
+        <Sidebar attention={attention} layoutParts={layoutParts} />
+
+        <ComplementarySidebar id={complementarySlug} layoutParts={layoutParts} flatDeck={flatDeck} />
+
+        {/* Dialog overlay to dismiss dialogs. */}
+        <Main.Overlay />
+
+        {/* Main content surface. */}
+        {layoutMode === 'deck' && layoutParts.main && layoutParts.main.length > 0 && (
+          <Main.Content bounce classNames={['grid', 'block-end-[--statusbar-size]']}>
+            <div role='none' className='relative'>
+              <Deck.Root
+                classNames={mx(
+                  'absolute inset-0',
+                  !flatDeck && 'surface-deck',
+                  slots?.wallpaper?.classNames,
+                  slots?.deck?.classNames,
+                  'transition-[padding] duration-200 ease-in-out',
+                )}
+                style={{ ...overscrollAmount }}
+              >
+                {layoutParts.main.map((layoutEntry) => {
+                  return (
+                    <Plank
+                      key={layoutEntry.id}
+                      entry={layoutEntry}
+                      layoutParts={layoutParts}
+                      part='main'
+                      resizeable
+                      flatDeck={flatDeck}
+                      searchEnabled={searchEnabled}
+                    />
+                  );
+                })}
+              </Deck.Root>
+            </div>
+          </Main.Content>
+        )}
+
+        {/* Solo main content surface. */}
+        {layoutMode === 'solo' && layoutParts.solo && layoutParts.solo.length > 0 && (
+          <Main.Content bounce classNames={['grid', 'block-end-[--statusbar-size]']}>
+            <Deck.Root
+              classNames={[!flatDeck && 'surface-deck', slots?.wallpaper?.classNames, slots?.deck?.classNames]}
+              solo={true}
+            >
+              {layoutParts.solo.map((layoutEntry) => {
+                return (
+                  <Plank
+                    key={layoutEntry.id}
+                    entry={layoutEntry}
+                    layoutParts={layoutParts}
+                    part='solo'
+                    flatDeck={flatDeck}
+                    classNames={slots?.plank?.classNames}
+                  />
+                );
+              })}
+            </Deck.Root>
+          </Main.Content>
+        )}
+
+        {((layoutMode === 'solo' && (!layoutParts.solo || layoutParts.solo.length === 0)) ||
+          (layoutMode === 'deck' && (!layoutParts.main || layoutParts.main.length === 0))) && (
+          <Main.Content>
+            <ContentEmpty />
+          </Main.Content>
+        )}
+
+        {/* Note: This is not Main.Content */}
+        <Main.Content role='none' classNames={['fixed inset-inline-0 block-end-0 z-[2]']}>
+          <Surface role='status-bar' limit={1} />
+        </Main.Content>
+
+        {/* Help hints. */}
+        {/* TODO(burdon): Make surface roles/names fully-qualified. */}
+        {showHintsFooter && (
+          <div className='fixed bottom-0 left-0 right-0 h-[32px] z-[1] flex justify-center'>
+            <Surface role='hints' limit={1} />
+          </div>
+        )}
+
+        {/* Global popovers. */}
+        <Popover.Portal>
+          <Popover.Content
+            classNames='z-[60]'
+            onEscapeKeyDown={() => {
+              context.popoverOpen = false;
+              context.popoverAnchorId = undefined;
+            }}
+          >
+            <Popover.Viewport>
+              <Surface role='popover' data={popoverContent} />
+            </Popover.Viewport>
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Portal>
+
+        {/* Global dialog. */}
+        <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
+          <Dialog.Overlay blockAlign={dialogBlockAlign}>
+            <Surface role='dialog' data={dialogContent} />
+          </Dialog.Overlay>
+        </Dialog.Root>
+
+        {/* Global toasts. */}
+        {toasts?.map((toast) => (
+          <Toast
+            {...toast}
+            key={toast.id}
+            onOpenChange={(open) => {
+              if (!open) {
+                onDismissToast(toast.id);
+              }
+
+              return open;
+            }}
+          />
+        ))}
+      </Main.Root>
+    </Popover.Root>
+  );
+};

package/src/components/DeckLayout/Fallback.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+import { errorText, mx } from '@dxos/react-ui-theme';
+
+import { DECK_PLUGIN } from '../../meta';
+
+export const Fallback = () => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
+  return (
+    <div role='none' className='min-bs-screen is-full flex items-center justify-center p-8'>
+      <p
+        role='alert'
+        className={mx(
+          errorText,
+          'border border-error-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg',
+        )}
+      >
+        {t('plugin error message')}
+      </p>
+    </div>
+  );
+};

package/src/components/DeckLayout/Fullscreen.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { useGraph } from '@dxos/plugin-graph';
+import { fixedInsetFlexLayout } from '@dxos/react-ui-theme';
+
+import { Fallback } from './Fallback';
+import { SURFACE_PREFIX } from './constants';
+import { useNode } from '../../hooks';
+
+export const Fullscreen = ({ id }: { id?: string }) => {
+  const { graph } = useGraph();
+  const fullScreenNode = useNode(graph, id);
+
+  return (
+    <div role='none' className={fixedInsetFlexLayout}>
+      <Surface
+        role='main'
+        limit={1}
+        fallback={Fallback}
+        data={{
+          active: fullScreenNode?.data,
+          component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : undefined,
+        }}
+      />
+    </div>
+  );
+};

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -0,0 +1,160 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Placeholder } from '@phosphor-icons/react';
+import React, { Fragment, useEffect } from 'react';
+
+import {
+  LayoutAction,
+  NavigationAction,
+  SLUG_COLLECTION_INDICATOR,
+  SLUG_PATH_SEPARATOR,
+  Surface,
+  useIntentDispatcher,
+  indexInPart,
+  partLength,
+  type LayoutParts,
+  type LayoutPart,
+  type LayoutEntry,
+} from '@dxos/app-framework';
+import { type Node, useGraph } from '@dxos/plugin-graph';
+import { Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
+import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
+import { TextTooltip } from '@dxos/react-ui-text-tooltip';
+
+import { DECK_PLUGIN } from '../../meta';
+
+export const NodePlankHeading = ({
+  node,
+  id,
+  layoutParts,
+  layoutPart,
+  // TODO(wittjosiah): Unused?
+  layoutEntry,
+  popoverAnchorId,
+  pending,
+  flatDeck,
+}: {
+  node?: Node;
+  id?: string;
+  layoutParts?: LayoutParts;
+  layoutPart?: LayoutPart;
+  layoutEntry?: LayoutEntry;
+  popoverAnchorId?: string;
+  pending?: boolean;
+  flatDeck?: boolean;
+}) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+  const { graph } = useGraph();
+  const Icon = node?.properties?.icon ?? Placeholder;
+  const label = pending
+    ? t('pending heading')
+    : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
+  const dispatch = useIntentDispatcher();
+  const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
+  const [isNotMobile] = useMediaQuery('md');
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      // Load actions for the node.
+      node && graph.actions(node);
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [node]);
+
+  // NOTE(Zan): Node ids may now contain a path like `${space}:${id}~comments`
+  const attendableId = id?.split(SLUG_PATH_SEPARATOR).at(0);
+
+  const layoutCoordinate = layoutPart !== undefined && id !== undefined ? { part: layoutPart, entryId: id } : undefined;
+  const index = indexInPart(layoutParts, layoutCoordinate);
+  const length = partLength(layoutParts, layoutPart);
+
+  const canIncrementStart =
+    layoutPart === 'main' && index !== undefined && index > 0 && length !== undefined && length > 1;
+  const canIncrementEnd = layoutPart === 'main' && index !== undefined && index < length - 1 && length !== undefined;
+
+  return (
+    <PlankHeading.Root
+      {...((layoutPart !== 'main' || !flatDeck) && { classNames: 'pie-1 border-b separator-separator' })}
+    >
+      <ActionRoot>
+        {node ? (
+          <PlankHeading.ActionsMenu
+            Icon={Icon}
+            attendableId={attendableId}
+            triggerLabel={t('actions menu label')}
+            actions={graph.actions(node)}
+            onAction={(action) =>
+              typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
+            }
+          >
+            <Surface role='menu-footer' data={{ object: node.data }} />
+          </PlankHeading.ActionsMenu>
+        ) : (
+          <PlankHeading.Button>
+            <span className='sr-only'>{label}</span>
+            <Icon {...plankHeadingIconProps} />
+          </PlankHeading.Button>
+        )}
+      </ActionRoot>
+      <TextTooltip text={label} onlyWhenTruncating>
+        <PlankHeading.Label attendableId={node?.id} {...(pending && { classNames: 'fg-description' })}>
+          {label}
+        </PlankHeading.Label>
+      </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
+        capabilities={{
+          solo: (layoutPart === 'solo' || layoutPart === 'main') && isNotMobile,
+          incrementStart: canIncrementStart,
+          incrementEnd: canIncrementEnd,
+        }}
+        isSolo={layoutPart === 'solo'}
+        onClick={(eventType) => {
+          if (!layoutPart) {
+            return;
+          }
+
+          if (eventType === 'solo') {
+            return dispatch([
+              {
+                action: NavigationAction.ADJUST,
+                data: { type: eventType, layoutCoordinate: { part: 'main', entryId: id } },
+              },
+            ]);
+          }
+
+          // TODO(Zan): Update this to use the new layout actions.
+          return dispatch(
+            eventType === 'close'
+              ? layoutPart === 'complementary'
+                ? {
+                    action: LayoutAction.SET_LAYOUT,
+                    data: {
+                      element: 'complementary',
+                      state: false,
+                    },
+                  }
+                : {
+                    action: NavigationAction.CLOSE,
+                    data: {
+                      activeParts: {
+                        complementary: [`${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
+                        [layoutPart]: [id],
+                      },
+                    },
+                  }
+              : { action: NavigationAction.ADJUST, data: { type: eventType, layoutCoordinate } },
+          );
+        }}
+        close={layoutCoordinate?.part === 'complementary' ? 'minify-end' : true}
+      />
+    </PlankHeading.Root>
+  );
+};