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

package/src/components/NavTreeContainer.tsx

@@ -0,0 +1,375 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ReactNode, useCallback, useMemo } from 'react';
+
+import {
+  NavigationAction,
+  LayoutAction,
+  Surface,
+  SLUG_PATH_SEPARATOR,
+  SLUG_COLLECTION_INDICATOR,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
+import { getGraph, isAction, isActionLike } from '@dxos/app-graph';
+import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '@dxos/react-ui-mosaic';
+import {
+  NavTree,
+  type NavTreeItemNode,
+  type NavTreeNode,
+  getLevel,
+  type NavTreeActionsNode,
+  type NavTreeProps,
+  type NavTreeItemMoveDetails,
+} from '@dxos/react-ui-navtree';
+import { arrayMove } from '@dxos/util';
+
+import { NavTreeFooter } from './NavTreeFooter';
+import { NAVTREE_PLUGIN } from '../meta';
+import {
+  expandActions,
+  expandChildren,
+  getChildren,
+  getParent,
+  type NavTreeItem,
+  type NavTreeItemGraphNode,
+  resolveMigrationOperation,
+  treeItemsFromRootNode,
+} from '../util';
+
+// TODO(thure): Is NavTree truly authoritative in this regard?
+export const NODE_TYPE = 'dxos/app-graph/node';
+
+const renderPresence = (node: NavTreeNode): ReactNode => (
+  <Surface role='presence--glyph' data={{ object: node.data }} />
+);
+
+export const NavTreeContainer = ({
+  root,
+  activeIds,
+  openItemIds,
+  onOpenItemIdsChange,
+  attended,
+  popoverAnchorId,
+}: {
+  root: NavTreeItemGraphNode;
+  activeIds: Set<string>;
+  openItemIds: Record<string, true>;
+  onOpenItemIdsChange: (nextOpenItemIds: Record<string, true>) => void;
+  attended: Set<string>;
+  popoverAnchorId?: string;
+}) => {
+  const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
+  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const dispatch = useIntentDispatcher();
+
+  const graph = useMemo(() => getGraph(root), [root]);
+
+  const items = treeItemsFromRootNode(graph, root, openItemIds);
+
+  const loadDescendents = useCallback(
+    (node: NavTreeNode | NavTreeActionsNode) => {
+      void expandActions(graph, node as NavTreeItemGraphNode);
+      if (!isActionLike(node)) {
+        void expandChildren(graph, node as NavTreeItemGraphNode).then(() =>
+          // Load one level deeper, which resolves some juddering observed on open/close.
+          Promise.all(
+            getChildren(graph, node as NavTreeItemGraphNode).flatMap((child) => [
+              expandActions(graph, child),
+              expandChildren(graph, child),
+            ]),
+          ),
+        );
+      }
+    },
+    [graph],
+  );
+
+  const handleNavigate = async ({ node, actions }: NavTreeItemNode) => {
+    if (!node.data) {
+      return;
+    }
+
+    // TODO(thure): Refactor opening related planks (comments in this case) to a generalized approach.
+    await dispatch({
+      action: NavigationAction.OPEN,
+      data: {
+        activeParts: node.data?.comments
+          ? {
+              main: [node.id],
+              complementary: [`${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
+            }
+          : {
+              main: [node.id],
+            },
+      },
+    });
+
+    await dispatch({ action: LayoutAction.SCROLL_INTO_VIEW, data: { id: node.id } });
+
+    const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
+    if (isAction(defaultAction)) {
+      void (defaultAction.data as () => void)();
+    }
+    !isLg && closeNavigationSidebar();
+  };
+
+  const handleItemOpenChange = ({ id, actions, path }: NavTreeItemNode, nextOpen: boolean) => {
+    if (path) {
+      if (nextOpen) {
+        onOpenItemIdsChange({ ...openItemIds, [id]: true });
+      } else {
+        // TODO(thure): Filter vs single-remove, make setting?
+        const { [id]: _, ...nextOpenItemIds } = openItemIds;
+        onOpenItemIdsChange(nextOpenItemIds);
+      }
+    }
+    // TODO(wittjosiah): This is a temporary solution to ensure spaces get enabled when they are expanded.
+    const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
+    if (isAction(defaultAction)) {
+      void (defaultAction.data as () => void)();
+    }
+  };
+
+  const resolveItemLevel = useCallback(
+    (overPosition: number | undefined, activeId: string | undefined, levelOffset: number) => {
+      if (!(typeof overPosition === 'number' && activeId)) {
+        return 1;
+      } else {
+        const nextItems = arrayMove(
+          items,
+          items.findIndex(({ id }) => id === activeId),
+          overPosition,
+        );
+        const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
+        const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
+        return Math.min(
+          previousItem ? getLevel(previousItem?.path) + 1 : 1,
+          Math.max(nextItem ? getLevel(nextItem?.path) : 1, getLevel(nextItems[overPosition].path) + levelOffset),
+        );
+      }
+    },
+    [items],
+  );
+
+  const handleMove: NavTreeProps['onMove'] = useCallback(
+    ({ active, over, details }: MosaicMoveEvent<number, NavTreeItemMoveDetails>) => {
+      const levelOffset = Math.floor((details?.delta?.x ?? 0) / 16);
+      const overPosition = over.position ?? 0;
+
+      const nextItems = arrayMove(
+        items,
+        items.findIndex(({ id }) => id === active.item.id),
+        overPosition,
+      );
+
+      const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
+      const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
+
+      const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
+
+      if (!activeNode || !previousItem || !previousItem.path) {
+        // console.log('[reject]', !activeNode, !previousItem, !previousItem.path);
+        // log.warn('Top-level rearrange before the first item of the NavTree is unsupported at this time.');
+        return { operation: 'reject' as const, details: { levelOffset } };
+      }
+
+      const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
+
+      const previousLevel = getLevel(previousItem.path);
+
+      // console.log('[over]', overLevel, previousLevel, levelOffset);
+
+      if (previousLevel === overLevel - 1) {
+        if (Path.hasChild(previousItem.id, active.item.id)) {
+          // Previous is already parent of Active, rearrange.
+          const operation = previousItem.node.properties.onRearrangeChildren
+            ? ('rearrange' as const)
+            : ('reject' as const);
+          return { operation, details: { levelOffset } };
+        } else {
+          // Previous is not yet parent of Active, check transfer or copy.
+          const operation = resolveMigrationOperation(graph, activeNode, previousItem.path, previousItem.node);
+          // console.log('[migration result]', operation, 'Previous is not yet parent of Active, check transfer or copy.');
+          return { operation, details: { levelOffset } };
+        }
+      } else if (previousLevel === overLevel) {
+        const parent = getParent(graph, previousItem.node, previousItem.path);
+        const parentPath = previousItem.path.slice(0, previousItem.path.length - 1);
+        if (Path.siblings(previousItem.id, active.item.id)) {
+          // Previous is already a sibling of Active, rearrange.
+          const operation = parent?.properties.onRearrangeChildren ? ('rearrange' as const) : ('reject' as const);
+          return { operation, details: { levelOffset } };
+        } else {
+          // Previous is not yet a sibling of Active, transfer/copy to Previous’s parent.
+          const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
+          // console.log(
+          //   '[migration result]',
+          //   operation,
+          //   'Previous is not yet a sibling of Active, transfer/copy to Previous’s parent.',
+          // );
+          return { operation, details: { levelOffset } };
+        }
+      } else if (nextItem && nextItem.path) {
+        const nextLevel = getLevel(nextItem.path);
+        if (nextLevel === overLevel) {
+          const parent = getParent(graph, nextItem.node, nextItem.path);
+          const parentPath = nextItem.path.slice(0, nextItem.path.length - 1);
+          if (Path.siblings(nextItem.id, active.item.id)) {
+            // Next is already a sibling of Active, rearrange.
+            const operation = parent?.properties.onRearrangeChildren ? ('rearrange' as const) : ('reject' as const);
+            return { operation, details: { levelOffset } };
+          } else {
+            // Next is not yet a sibling of Active, transfer to Next’s parent.
+            const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
+            // console.log(
+            //   '[migration result]',
+            //   operation,
+            //   'Next is not yet a sibling of Active, transfer to Next’s parent.',
+            // );
+            return { operation, details: { levelOffset } };
+          }
+        } else {
+          // console.log('[migration result]', 'reject');
+          return { operation: 'reject' as const, details: { levelOffset } };
+        }
+      } else {
+        // console.log('[migration result]', 'reject');
+        return { operation: 'reject' as const, details: { levelOffset } };
+      }
+    },
+    [root, items],
+  );
+
+  const handleDrop = useCallback(
+    ({ operation, active, over, details = {} }: MosaicDropEvent<number, NavTreeItemMoveDetails>) => {
+      if (Path.first(over.path) !== root.id) {
+        return undefined;
+      }
+      const { levelOffset = 0 } = details;
+      const overPosition = over.position ?? 0;
+
+      const nextItems = arrayMove(
+        items,
+        items.findIndex(({ id }) => id === active.item.id),
+        overPosition,
+      );
+
+      const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
+      const activeParentId = Path.parent(active.item.id);
+
+      if (!activeNode) {
+        return undefined;
+      }
+
+      const activeParent = getParent(graph, activeNode, (active.item as NavTreeItem).path ?? []);
+
+      if (operation === 'rearrange') {
+        void activeParent?.properties.onRearrangeChildren?.(
+          nextItems.filter(({ id }) => Path.hasChild(activeParentId, id)).map(({ node }) => node.data),
+        );
+        return null;
+      } else {
+        const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
+        const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
+
+        const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
+
+        const previousLevel = getLevel(previousItem.path);
+
+        if (operation === 'copy') {
+          if (previousLevel === overLevel - 1) {
+            void previousItem.node.properties.onCopy?.(activeNode, 0);
+            return null;
+          } else if (previousLevel === overLevel) {
+            const parent = getParent(graph, previousItem.node, previousItem.path ?? []);
+            void parent?.properties.onCopy?.(
+              activeNode,
+              getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1,
+            );
+            return null;
+          } else if (nextItem && nextItem.path) {
+            const parent = getParent(graph, nextItem.node, nextItem.path ?? []);
+            void parent?.properties.onCopy?.(
+              activeNode,
+              getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id),
+            );
+            return null;
+          }
+        } else if (operation === 'transfer') {
+          const onTransferEnd = activeParent?.properties.onTransferEnd;
+          if (!onTransferEnd) {
+            return undefined;
+          } else if (previousLevel === overLevel - 1) {
+            const onTransferStart = previousItem.node.properties.onTransferStart;
+            if (onTransferStart) {
+              void onTransferEnd(activeNode, previousItem.node);
+              void onTransferStart(activeNode, 0);
+              return null;
+            }
+          } else if (previousLevel === overLevel && previousItem.path) {
+            const parent = getParent(graph, previousItem.node, previousItem.path);
+            if (parent?.properties.onTransferStart) {
+              void onTransferEnd(activeNode, previousItem.node);
+              void parent.properties.onTransferStart(
+                activeNode,
+                getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1,
+              );
+              return null;
+            }
+          } else if (nextItem && nextItem.path) {
+            const parent = getParent(graph, nextItem.node, nextItem.path);
+            if (parent?.properties.onTransferStart) {
+              void onTransferEnd(activeNode, previousItem.node);
+              void parent.properties.onTransferStart(
+                activeNode,
+                getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id),
+              );
+              return null;
+            }
+          }
+        }
+      }
+      return undefined;
+    },
+    [root, items],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    onOpenItemIdsChange({ ...openItemIds });
+  }, [onOpenItemIdsChange, openItemIds]);
+
+  return (
+    <ElevationProvider elevation='chrome'>
+      <div
+        role='none'
+        className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'
+      >
+        <Surface role='search-input' limit={1} />
+        {/* TODO(thure): what gives this an inline `overflow: initial`? */}
+        <div role='none' className='!overflow-y-auto'>
+          <NavTree
+            id={root.id}
+            items={items}
+            current={activeIds}
+            attended={attended}
+            type={NODE_TYPE}
+            onNavigate={handleNavigate}
+            onItemOpenChange={handleItemOpenChange}
+            open={openItemIds}
+            onMove={handleMove}
+            onDrop={handleDrop}
+            onDragEnd={handleDragEnd}
+            popoverAnchorId={popoverAnchorId}
+            renderPresence={renderPresence}
+            resolveItemLevel={resolveItemLevel}
+            loadDescendents={loadDescendents}
+          />
+        </div>
+        <NavTreeFooter />
+      </div>
+    </ElevationProvider>
+  );
+};

package/src/components/NavTreeDocumentTitle.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { useEffect } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+
+import { NAVTREE_PLUGIN } from '../meta';
+
+export const NavTreeDocumentTitle = ({ node }: { node?: Node }) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  useEffect(() => {
+    document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: 'appkit' });
+  }, [node?.properties?.label]);
+  return null;
+};

package/src/components/NavTreeFooter.tsx

@@ -0,0 +1,155 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ArrowSquareOut, GearSix, Warning } from '@phosphor-icons/react';
+import { formatDistance } from 'date-fns/formatDistance';
+import React from 'react';
+
+import {
+  SettingsAction,
+  useResolvePlugin,
+  parseNavigationPlugin,
+  useIntentDispatcher,
+  type LayoutPart,
+} from '@dxos/app-framework';
+import { useConfig } from '@dxos/react-client';
+import {
+  Button,
+  Tooltip,
+  Popover,
+  useSidebars,
+  useTranslation,
+  Link,
+  Message,
+  Trans,
+  useDefaultValue,
+} from '@dxos/react-ui';
+import { PlankHeading } from '@dxos/react-ui-deck';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { NAVTREE_PLUGIN } from '../meta';
+
+const buttonStyles = 'pli-1.5 text-xs font-normal';
+
+const repo = 'https://github.com/dxos/dxos';
+
+export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
+  const layoutPart = useDefaultValue(props.layoutPart, 'sidebar');
+  const config = useConfig();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
+  const dispatch = useIntentDispatcher();
+  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
+  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+
+  const releaseUrl =
+    config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production'
+      ? `${repo}/releases/tag/v${version}`
+      : `${repo}/commit/${commitHash}`;
+
+  const previewUrl = 'https://docs.dxos.org/composer#technology-preview';
+
+  return (
+    <div
+      role='none'
+      className={mx(
+        'bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content separator-separator border-bs pli-1 flex justify-end',
+        layoutPart === 'complementary' && 'md:justify-end flex-row-reverse',
+      )}
+    >
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <Button variant='ghost' classNames={buttonStyles} {...(!navigationSidebarOpen && { tabIndex: -1 })}>
+            v{version}
+          </Button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            side='top'
+            role='message'
+            classNames='z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]'
+          >
+            <Message.Root valence='warning' className='rounded-be-none p-5'>
+              <Message.Title>
+                <Warning weight='duotone' className='inline mie-2 is-6 bs-6' />
+                <span>{t('warning title')}</span>
+              </Message.Title>
+              <Message.Body>
+                {t('technology preview message')}
+                <br />
+                <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                  {t('learn more label')}
+                  <ArrowSquareOut className='inline mis-1' weight='bold' />
+                </Link>
+              </Message.Body>
+            </Message.Root>
+            <div role='none' className='plb-4 pli-5 space-b-2 text-base'>
+              {timestamp && (
+                <p>
+                  {t('released message', {
+                    released: formatDistance(new Date(timestamp), new Date(), { addSuffix: true }),
+                  })}
+                  <br />
+                  <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                    {t('see release label')}
+                    <ArrowSquareOut className='inline mis-1' weight='bold' />
+                  </Link>
+                </p>
+              )}
+              <p>
+                <Trans
+                  {...{
+                    t,
+                    i18nKey: 'powered by dxos message',
+                    components: {
+                      dxos: <Link href='https://dxos.org' target='_blank' rel='noreferrer' variant='neutral' />,
+                    },
+                  }}
+                />
+              </p>
+            </div>
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          {/* TODO(burdon): Reconcile with action created by LayoutPlugin. */}
+          <Button
+            variant='ghost'
+            classNames={buttonStyles}
+            data-testid='treeView.openSettings'
+            data-joyride='welcome/settings'
+            {...(!navigationSidebarOpen && { tabIndex: -1 })}
+            onClick={() => dispatch({ action: SettingsAction.OPEN })}
+          >
+            <span className='sr-only'>{t('open settings label')}</span>
+            <GearSix className={mx(getSize(4), 'rotate-90')} />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content classNames='z-[12]'>
+            {t('open settings label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+
+      {/* NOTE(thure): Unpinning from the NavTree’s default position in Deck is temporarily disabled. */}
+      {navigationPlugin?.meta.id === 'dxos.org/plugin/deck' && (
+        <PlankHeading.Controls
+          variant='hide-disabled'
+          capabilities={{
+            incrementStart: false,
+            incrementEnd: false,
+          }}
+          onClick={(_type) => {
+            // TODO(Zan): If we inmplement pinning again, we should dispatch here.
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/NotchStart.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useIntentDispatcher, useResolvePlugin } from '@dxos/app-framework';
+import { ClientAction } from '@dxos/plugin-client/meta';
+import { parseObservabilityPlugin } from '@dxos/plugin-observability';
+import { useIdentity } from '@dxos/react-client/halo';
+
+import { HaloButton } from './HaloButton';
+
+// TODO(thure): Refactor to be handled by a more appropriate plugin (ClientPlugin?).
+export const NotchStart = () => {
+  const identity = useIdentity();
+  const observabilityPlugin = useResolvePlugin(parseObservabilityPlugin);
+  const dispatch = useIntentDispatcher();
+  return (
+    <HaloButton
+      size={8}
+      identityKey={identity?.identityKey.toHex()}
+      hue={identity?.profile?.data?.hue}
+      emoji={identity?.profile?.data?.emoji}
+      internal={observabilityPlugin?.provides?.observability?.group === 'dxos'}
+      onClick={() => dispatch({ action: ClientAction.SHARE_IDENTITY })}
+    />
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './CommandsDialog';
+export * from './NavBarStart';
+export * from './NavTreeContainer';
+export * from './NavTreeDocumentTitle';
+export * from './NotchStart';