@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.1c7ec43d41

package/src/components/SimpleLayout/NavBar.tsx

@@ -2,96 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
-import { Node, useActionRunner, useConnections } from '@dxos/plugin-graph';
-import {
-  Avatar,
-  Button,
-  ButtonGroup,
-  DensityProvider,
-  IconButton,
-  type Size,
-  Tooltip,
-  useTranslation,
-} from '@dxos/react-ui';
-import { DropdownMenu, MenuProvider } from '@dxos/react-ui-menu';
-import { mx, surfaceZIndex } from '@dxos/ui-theme';
+import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
+import { composable, composableProps } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-
-const buttonProps = {
-  iconOnly: true,
-  size: 6 as Size,
-  classNames: 'aspect-square',
-};
+const NAVBAR_NAME = 'SimpleLayout.NavBar';
 
 export type NavBarProps = {
-  activeId?: string;
-  onActiveIdChange?: (nextActiveId: string | null) => void;
+  /** Action graph atom for the toolbar. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Action executor callback. */
+  onAction?: ActionExecutor;
 };
 
-export const NavBar = ({ activeId, onActiveIdChange }: NavBarProps) => {
-  const { t } = useTranslation(meta.id);
-  const { graph } = useAppGraph();
-  const runAction = useActionRunner();
-
-  const connections = useConnections(graph, Node.RootId);
-  const menuActions = connections.filter((node) => node.properties.disposition === 'menu');
-
-  const isBrowseActive = activeId !== 'notifications' && activeId !== 'profile';
+/**
+ * Presentational navbar component that renders a toolbar from an action graph.
+ */
+export const NavBar = composable<HTMLDivElement, NavBarProps>(({ actions, onAction, ...props }, forwardedRef) => {
+  const menuActions = useMenuActions(actions);
 
   return (
-    <DensityProvider density='coarse'>
-      <nav
-        className={mx(
-          'fixed inset-inline-0',
-          'grid grid-cols-[min-content_min-content] gap-2 place-content-center',
-          'block-end-[--dx-mobile-bottombar-inset-bottom,0px] bs-[--dx-mobile-bottombar-content-height,64px]',
-          'bg-baseSurface border-bs border-separator',
-          surfaceZIndex({ level: 'menu' }),
-        )}
-      >
-        <ButtonGroup>
-          <IconButton
-            {...buttonProps}
-            label={t('browse label')}
-            icon='ph--squares-four--regular'
-            onClick={() => onActiveIdChange?.(null)}
-            variant={isBrowseActive ? 'primary' : 'default'}
-            {...(isBrowseActive && { 'aria-current': 'location' })}
-          />
-          <IconButton
-            {...buttonProps}
-            label={t('notifications label')}
-            icon='ph--bell-simple--regular'
-            onClick={() => onActiveIdChange?.('notifications')}
-            variant={activeId === 'notifications' ? 'primary' : 'default'}
-            {...(activeId === 'notifications' && { 'aria-current': 'location' })}
-          />
-          <Button
-            variant={activeId === 'profile' ? 'primary' : 'default'}
-            onClick={() => onActiveIdChange?.('profile')}
-            classNames={buttonProps.classNames}
-          >
-            <span className='sr-only'>{t('profile label')}</span>
-            <Avatar.Root>
-              <Avatar.Label classNames='sr-only'>Profile display name</Avatar.Label>
-              <Avatar.Content size={8} status='active' hue='cyan' fallback='🗿' />
-            </Avatar.Root>
-          </Button>
-        </ButtonGroup>
-        <MenuProvider onAction={runAction}>
-          <DropdownMenu.Root items={menuActions}>
-            <Tooltip.Trigger asChild content={t('app menu label')} side='right'>
-              <DropdownMenu.Trigger asChild data-testid='spacePlugin.addSpace'>
-                <IconButton {...buttonProps} icon='ph--plus--regular' label={t('main menu label')} />
-              </DropdownMenu.Trigger>
-            </Tooltip.Trigger>
-          </DropdownMenu.Root>
-        </MenuProvider>
-      </nav>
-    </DensityProvider>
+    <Menu.Root {...menuActions} alwaysActive onAction={onAction}>
+      <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+    </Menu.Root>
   );
-};
+});
+
+NavBar.displayName = NAVBAR_NAME;

package/src/components/SimpleLayout/SimpleLayout.stories.tsx

@@ -5,88 +5,71 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientOperation, ClientPlugin } from '@dxos/plugin-client';
+import { AppActivationEvents } from '@dxos/app-toolkit/events';
+import { Collection } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { SearchPlugin } from '@dxos/plugin-search';
 import { SpacePlugin } from '@dxos/plugin-space';
-import { SpaceOperation } from '@dxos/plugin-space/types';
 import { corePlugins } from '@dxos/plugin-testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { translations as searchTranslation } from '@dxos/react-ui-searchlist';
-import { Collection } from '@dxos/schema';
+import { translations as searchTranslation } from '@dxos/react-ui-search/translations';
+import { withLayout } from '@dxos/react-ui/testing';
 
-import { OperationResolver, type SimpleLayoutStateOptions, State } from '../../capabilities';
-import { meta as pluginMeta } from '../../meta';
-import { type SimpleLayoutPluginOptions } from '../../SimpleLayoutPlugin';
-import { translations } from '../../translations';
+import { ReactRoot, ReactSurface, State } from '#capabilities';
+import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
+import { SimpleLayoutEvents } from '#types';
 
+import { type SimpleLayoutPluginOptions } from '../../SimpleLayoutPlugin';
 import { SimpleLayout } from './SimpleLayout';
 
-const TestPlugin = Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
-  Plugin.addModule(({ isPopover = false }) => ({
-    id: Capability.getModuleTag(State),
-    activatesOn: Common.ActivationEvent.Startup,
-    activatesAfter: [Common.ActivationEvent.LayoutReady],
-    activate: () => State({ initialState: { isPopover } } satisfies SimpleLayoutStateOptions),
-  })),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Plugin.addModule({
-    id: 'setup',
-    activatesOn: Common.ActivationEvent.OperationInvokerReady,
-    activate: Effect.fnUntraced(function* () {
-      const { invoke } = yield* Capability.get(Common.Capability.OperationInvoker);
-      yield* invoke(ClientOperation.CreateIdentity, {});
-      const { space: work } = yield* invoke(SpaceOperation.Create, { name: 'Work Space' });
-      const { space: sharedProject } = yield* invoke(SpaceOperation.Create, { name: 'Shared Project' });
-
-      // Add collections to Work Space.
-      yield* invoke(SpaceOperation.AddObject, {
-        target: work.db,
-        object: Collection.make({ name: 'Projects', objects: [] }),
-      });
-      yield* invoke(SpaceOperation.AddObject, {
-        target: work.db,
-        object: Collection.make({ name: 'Documents', objects: [] }),
-      });
-
-      // Add collections to Shared Project.
-      yield* invoke(SpaceOperation.AddObject, {
-        target: sharedProject.db,
-        object: Collection.make({ name: 'Tasks', objects: [] }),
-      });
-      yield* invoke(SpaceOperation.AddObject, {
-        target: sharedProject.db,
-        object: Collection.make({ name: 'Notes', objects: [] }),
-      });
-    }),
-  }),
-  Plugin.make,
-);
-
-const createPluginManager = ({ isPopover }: { isPopover: boolean }) => {
+const createPluginManager = ({ isPopover }: { isPopover?: boolean }) => {
   return withPluginManager({
+    setupEvents: [AppActivationEvents.SetupSettings],
     plugins: [
       ...corePlugins(),
       ClientPlugin({
+        types: [Collection.Collection],
         onClientInitialized: ({ client }) =>
           Effect.gen(function* () {
             yield* Effect.promise(() => client.halo.createIdentity());
-            yield* Effect.promise(async () => {
-              await client.spaces.create({ name: 'Work Space' });
-              await client.spaces.create({ name: 'Shared Project' });
-            });
           }),
       }),
-      SpacePlugin({}),
+
       SearchPlugin(),
-      TestPlugin({ isPopover }),
+      SpacePlugin({}),
+
+      // TODO(burdon): This should be factored ouf from SimpleLayoutPlugin.
+      Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
+        Plugin.addModule(({ isPopover = false }) => ({
+          id: Capability.getModuleTag(State),
+          activatesOn: ActivationEvents.Startup,
+          firesAfterActivation: [SimpleLayoutEvents.StateReady, AppActivationEvents.LayoutReady],
+          activate: () => State({ initialState: { isPopover } }),
+        })),
+        Plugin.addModule({
+          id: Capability.getModuleTag(ReactRoot),
+          activatesOn: ActivationEvents.Startup,
+          activate: ReactRoot,
+        }),
+        Plugin.addModule({
+          id: Capability.getModuleTag(ReactSurface),
+          activatesOn: ActivationEvents.Startup,
+          activate: ReactSurface,
+        }),
+        Plugin.make,
+      )({ isPopover }),
     ],
   });
 };
 
+/**
+ * NOTE: To expose to iphone on network:
+ * `moon run storybook-react:serve dev -H 0.0.0.0`
+ */
 const meta = {
-  title: 'plugins/plugin-simple-layout/SimpleLayout',
+  title: 'plugins/plugin-simple-layout/components/SimpleLayout',
   component: SimpleLayout,
   parameters: {
     layout: 'fullscreen',
@@ -99,9 +82,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  decorators: [withTheme, createPluginManager({ isPopover: false })],
+  decorators: [withLayout({ layout: 'column', classNames: 'relative' }), createPluginManager({})],
 };
 
 export const Popover: Story = {
-  decorators: [withTheme, createPluginManager({ isPopover: true })],
+  decorators: [withLayout({ layout: 'column', classNames: 'relative' }), createPluginManager({ isPopover: true })],
 };

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -2,20 +2,57 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
+import { Splitter, type SplitterMode } from '@dxos/react-ui';
+import { Mosaic } from '@dxos/react-ui-mosaic';
+
+import { useSimpleLayoutState } from '#hooks';
+
+import { DebugOverlay } from '../DebugOverlay';
 import { Dialog } from '../Dialog';
+import { MobileLayout } from '../MobileLayout';
 import { PopoverContent, PopoverRoot } from '../Popover';
-
+import { Drawer } from './Drawer';
 import { Main } from './Main';
 
-// TODO(wittjosiah): Support toast.
 export const SimpleLayout = () => {
+  const { state } = useSimpleLayoutState();
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
+
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  // Restore Splitter mode when keyboard closes.
+  useLayoutEffect(() => {
+    if (!keyboardOpen) {
+      setSplitterMode(state.drawerState === 'closed' ? 'top' : state.drawerState === 'open' ? 'split' : 'bottom');
+    }
+  }, [state.drawerState, keyboardOpen]);
+
   return (
-    <PopoverRoot>
-      <Main />
-      <Dialog />
-      <PopoverContent />
-    </PopoverRoot>
+    <DebugOverlay.Root enabled={false}>
+      <PopoverRoot>
+        <Mosaic.Root>
+          <MobileLayout.Root
+            classNames='dx-container grid relative bg-toolbar-surface'
+            onKeyboardOpenChange={(nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)}
+          >
+            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
+              <Splitter.Root mode={splitterMode} ratio={0.55}>
+                <Splitter.Panel position='top'>
+                  <Main />
+                </Splitter.Panel>
+                <Splitter.Panel position='bottom' ref={drawerRef}>
+                  <Drawer />
+                </Splitter.Panel>
+              </Splitter.Root>
+              <Dialog />
+              <PopoverContent />
+            </MobileLayout.Panel>
+          </MobileLayout.Root>
+        </Mosaic.Root>
+      </PopoverRoot>
+    </DebugOverlay.Root>
   );
 };

package/src/components/SimpleLayout/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
+export * from './AppBar';
+export * from './Main';
+export * from './NavBar';
 export * from './SimpleLayout';

package/src/components/hooks.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph } from '@dxos/plugin-graph';
+import { expandAttendableId } from '@dxos/react-ui-attention';
+
+/**
+ * Expand graph nodes along the full path from root to the given node ID.
+ * Walks each progressive prefix, ensuring ancestor nodes are materialized
+ * before attempting to access their children.
+ */
+export const useExpandPath = (nodeId?: string) => {
+  const { graph } = useAppGraph();
+
+  useEffect(() => {
+    if (nodeId) {
+      for (const prefix of expandAttendableId(nodeId)) {
+        Graph.expand(graph, prefix, 'child');
+      }
+    }
+  }, [nodeId, graph]);
+};

package/src/components/index.ts

@@ -2,7 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ContentLoading';
+export * from './DebugOverlay';
 export * from './Home';
+export * from './Loading';
+export * from './MobileLayout';
 export * from './Popover';
 export * from './SimpleLayout';
+export * from './NavBranch';

package/src/hooks/actions.ts

@@ -0,0 +1,84 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { type AppCapabilities } from '@dxos/app-toolkit';
+import { Node } from '@dxos/plugin-graph';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
+import { type ActionGraphProps } from '@dxos/react-ui-menu';
+import { byPosition } from '@dxos/util';
+
+import { type SimpleLayoutState } from '#types';
+
+// TODO(wittjosiah): Factor out to shared location with plugin-deck.
+export const PLANK_COMPANION_TYPE = 'org.dxos.plugin.deck.plank-companion';
+
+export type CompanionActionsConfig = {
+  /** Prefix for companion action IDs (e.g. 'navbar' or 'drawer') */
+  idPrefix: string;
+  /** Optional: highlight companion with this variant */
+  selectedVariant?: string;
+  /** State updater for toggling the drawer. */
+  updateState: (fn: (state: SimpleLayoutState) => SimpleLayoutState) => void;
+};
+
+/**
+ * Creates action graph nodes and edges for companion actions.
+ * Shared logic between useNavbarActions and useDrawerActions.
+ */
+// TODO(burdon): Use builder pattern.
+export const createCompanionActions = (
+  graph: AppCapabilities.AppGraph['graph'],
+  stateAtom: Atom.Atom<SimpleLayoutState>,
+  get: (atom: Atom.Atom<any>) => any,
+  config: CompanionActionsConfig,
+): Pick<ActionGraphProps, 'nodes' | 'edges'> => {
+  const { idPrefix, selectedVariant, updateState } = config;
+
+  // Derive activeId from state atom.
+  const state = get(stateAtom);
+  const activeId = state.active ?? state.workspace;
+
+  // Get companions from graph connections for activeId.
+  const activeConnections = activeId ? get(graph.connections(activeId, 'child')) : [];
+  const companions = activeConnections
+    .filter((node: Node.Node) => node.type === PLANK_COMPANION_TYPE)
+    .toSorted((a: Node.Node, b: Node.Node) => byPosition(a.properties, b.properties));
+
+  const nodes: ActionGraphProps['nodes'] = [];
+  const edges: ActionGraphProps['edges'] = [];
+
+  companions.forEach((companion: Node.Node) => {
+    const companionVariant = getLinkedVariant(companion.id);
+    const companionAction = {
+      id: `${idPrefix}-companion-${companion.id}`,
+      type: Node.ActionType,
+      properties: {
+        icon: companion.properties.icon ?? 'ph--placeholder--regular',
+        label: companion.properties.label,
+        iconOnly: true,
+        ...(selectedVariant !== undefined && {
+          variant: selectedVariant === companionVariant ? 'primary' : 'ghost',
+        }),
+      },
+      data: () =>
+        Effect.sync(() =>
+          updateState((current) => {
+            const closing = current.companionVariant === companionVariant && current.drawerState !== 'closed';
+            return {
+              ...current,
+              companionVariant: closing ? undefined : companionVariant,
+              drawerState: closing ? 'closed' : 'open',
+            };
+          }),
+        ),
+    };
+    nodes.push(companionAction);
+    edges.push({ source: 'root', target: companionAction.id, relation: 'child' });
+  });
+
+  return { nodes, edges };
+};

package/src/hooks/index.ts

@@ -2,4 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './useSpotlightDismiss';
+export * from './useAppBarProps';
+export * from './useCompanions';
+export * from './actions';
+export * from './useDrawerActions';
+export * from './useNavbarActions';
+export * from './useSimpleLayoutState';

package/src/hooks/useAppBarProps.ts

@@ -0,0 +1,95 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Option from 'effect/Option';
+import { useCallback, useMemo } from 'react';
+
+import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph, Node, useActionRunner, useNode } from '@dxos/plugin-graph';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type ActionGraphProps } from '@dxos/react-ui-menu';
+
+import { type AppBarProps } from '#components';
+import { meta } from '#meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '#types';
+
+/**
+ * Hook that computes all AppBar props from the app graph.
+ * Derives activeId from state atom. Returns props ready to spread into the AppBar component.
+ */
+export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
+  const { t } = useTranslation(meta.id);
+  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const state = useAtomValue(stateAtom);
+  const { graph } = useAppGraph();
+  const { invokePromise } = useOperationInvoker();
+  const runAction = useActionRunner();
+
+  // Derive activeId from state.
+  const activeId = state.active ?? state.workspace;
+  const node = useNode(graph, activeId);
+
+  // Compute title from node label.
+  const title = node ? toLocalizedString(node.properties.label, t) : undefined;
+
+  // Build actions atom filtering by disposition.
+  // Derive activeId from state atom so we don't need to recreate this atom when it changes.
+  const actionsAtom = useMemo(
+    () =>
+      Atom.make((get): ActionGraphProps => {
+        const state = get(stateAtom);
+        const activeId = state.active ?? state.workspace;
+        const allActions = activeId ? get(graph.actions(activeId)) : [];
+        const filtered = allActions.filter((action) =>
+          ['list-item', 'list-item-primary', 'heading-list-item'].includes(action.properties.disposition),
+        );
+        const nodes: ActionGraphProps['nodes'] = filtered as ActionGraphProps['nodes'];
+        const edges: ActionGraphProps['edges'] = filtered.map((action) => ({
+          source: 'root',
+          target: action.id,
+          relation: 'child',
+        }));
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom],
+  );
+
+  // Back button logic.
+  const showBackButton = activeId !== undefined && activeId !== Node.RootId;
+
+  const onBack = useCallback(() => {
+    if (state.active) {
+      const isWorkspace = Graph.getNode(graph, state.active).pipe(
+        Option.map((node) => node.properties.disposition === 'workspace'),
+        Option.getOrElse(() => false),
+      );
+
+      // If history is empty and this is a workspace, go to home.
+      if (state.history.length === 0 && isWorkspace) {
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      } else {
+        // Otherwise, close (which will pop from history or clear active).
+        void invokePromise(LayoutOperation.Close, { subject: [state.active] });
+      }
+    } else {
+      void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+    }
+  }, [graph, invokePromise, state.active, state.history.length]);
+
+  // Compute popover anchor ID.
+  const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : undefined;
+
+  return {
+    title,
+    actions: actionsAtom,
+    showBackButton,
+    popoverAnchorId,
+    onBack: onBack,
+    onAction: runAction,
+  };
+};

package/src/hooks/useCompanions.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { useConnections } from '@dxos/plugin-graph';
+import { byPosition } from '@dxos/util';
+
+import { PLANK_COMPANION_TYPE } from './actions';
+
+/**
+ * @deprecated Adopt the pattern from useNavbarActions (deriving from graph atoms)
+ *   or merge the Drawer companion display into the NavBar component.
+ */
+export const useCompanions = (nodeId?: string) => {
+  const { graph } = useAppGraph();
+  const nodes = useConnections(graph, nodeId, 'child');
+  const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
+  return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
+};