@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.52d7546f51

package/src/components/SimpleLayout/Drawer.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { type Node, useNode } from '@dxos/plugin-graph';
+import { Layout } from '@dxos/react-ui';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+
+import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
+import { ContentError } from '../ContentError';
+import { ContentLoading } from '../ContentLoading';
+
+const DRAWER_NAME = 'SimpleLayout.Drawer';
+
+/**
+ * Companion drawer component.
+ */
+export const Drawer = () => {
+  const { graph } = useAppGraph();
+  const { state: layoutState } = useSimpleLayoutState();
+
+  const placeholder = useMemo(() => <ContentLoading />, []);
+
+  // Get all companions for the current active (primary) item.
+  const activeId = layoutState.active ?? layoutState.workspace;
+  const companions = useCompanions(activeId);
+  const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
+
+  // Get node for the selected companion.
+  const node = useNode(graph, companionId);
+  const parentNode = useNode(graph, activeId);
+
+  // Build Surface data for the companion content.
+  const data = useMemo(() => {
+    return (
+      node && {
+        attendableId: companionId,
+        subject: node.data,
+        companionTo: parentNode?.data,
+        properties: node.properties,
+        variant,
+      }
+    );
+  }, [companionId, node, parentNode, variant]);
+
+  // Get drawer actions (tabs + toolbar buttons).
+  const { actions, onAction } = useDrawerActions(DRAWER_NAME);
+  const menu = useMenuActions(actions);
+
+  return (
+    <Layout.Main toolbar>
+      <MenuProvider {...menu} onAction={onAction} alwaysActive>
+        <ToolbarMenu density='coarse' />
+      </MenuProvider>
+      <Surface.Surface role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
+    </Layout.Main>
+  );
+};
+
+Drawer.displayName = DRAWER_NAME;
+
+/** Parse entry ID to extract primary ID and variant. */
+const parseEntryId = (entryId: string) => {
+  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
+  return { id, variant };
+};
+
+/**
+ * Resolves which companion to show based on variant preference.
+ * Falls back to first available if preferred variant not available.
+ */
+const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string) => {
+  const selectedCompanion = useMemo(() => {
+    if (companions.length === 0) {
+      return undefined;
+    }
+
+    // Try to find companion matching the preferred variant.
+    if (preferredVariant) {
+      const preferred = companions.find((c) => {
+        const { variant } = parseEntryId(c.id);
+        return variant === preferredVariant;
+      });
+      if (preferred) {
+        return preferred;
+      }
+    }
+
+    // Fallback to first companion.
+    return companions[0];
+  }, [companions, preferredVariant]);
+
+  const companionId = selectedCompanion?.id;
+  const { variant } = parseEntryId(companionId ?? '');
+
+  return { selectedCompanion, companionId, variant };
+};

package/src/components/SimpleLayout/Main.tsx

@@ -2,84 +2,80 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Activity, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
-import { Surface, useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
-import { Main as NaturalMain } from '@dxos/react-ui';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/ui-theme';
 
-import { SimpleLayoutState } from '../../types';
+import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
 import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
-import { Home } from '../Home';
+import { useLoadDescendents } from '../hooks';
+import { useMobileLayout } from '../MobileLayout/MobileLayout';
 
-import { Banner } from './Banner';
+import { AppBar } from './AppBar';
 import { NavBar } from './NavBar';
 
+const MAIN_NAME = 'SimpleLayout.Main';
+
+/**
+ * Main content component.
+ */
 export const Main = () => {
-  const layout = useCapability(SimpleLayoutState);
-  const id = layout.active ?? layout.workspace;
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
+  const { state } = useSimpleLayoutState();
+  const id = state.active ?? state.workspace;
+  const attentionAttrs = useAttentionAttributes(id);
+  const { keyboardOpen } = useMobileLayout(MAIN_NAME);
+  const { actions, onAction } = useNavbarActions();
+  const appBarProps = useAppBarProps();
 
   const placeholder = useMemo(() => <ContentLoading />, []);
 
-  const { variant } = parseEntryId(id);
-  const data = useMemo(
-    () =>
+  const { graph } = useAppGraph();
+  const node = useNode(graph, id);
+  const data = useMemo(() => {
+    return (
       node && {
         attendableId: id,
         subject: node.data,
         properties: node.properties,
-        variant,
-        popoverAnchorId: layout.popoverAnchorId,
-      },
-    [node, node?.data, node?.properties, layout.popoverAnchorId, variant, id],
-  );
+        popoverAnchorId: state.popoverAnchorId,
+      }
+    );
+  }, [id, node, node?.data, node?.properties, state.popoverAnchorId]);
 
-  const handleActiveIdChange = (nextActiveId: string | null) => {
-    // eslint-disable-next-line no-console
-    console.log('[navigate]', nextActiveId);
-  };
+  // Ensures that children are loaded so that they are available to navigate to.
+  useLoadDescendents(id);
 
-  const showNavBar = !layout.isPopover;
+  // TODO(burdon): BUG: When showing ANY statusbar the size progressively shrinks when the keyboard opens/closes.
+  const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === 'closed';
 
   return (
-    <NaturalMain.Root complementarySidebarState='closed' navigationSidebarState='closed'>
-      <NaturalMain.Content bounce classNames='dx-mobile-main dx-mobile-main-scroll-area--flush !overflow-y-auto'>
-        <div
-          className={mx(
-            'bs-full overflow-hidden grid',
-            showNavBar ? 'grid-rows-[min-content_1fr_min-content]' : 'grid-rows-[min-content_1fr]',
-          )}
-        >
-          <Banner node={node} />
-          <Activity mode={id === 'default' ? 'visible' : 'hidden'}>
-            <Home />
-          </Activity>
-          <Activity mode={id !== 'default' ? 'visible' : 'hidden'}>
-            <section>
-              <Surface
-                key={id}
-                role='article'
-                data={data}
-                limit={1}
-                fallback={ContentError}
-                placeholder={placeholder}
-              />
-            </section>
-          </Activity>
-          {showNavBar && <NavBar activeId={id} onActiveIdChange={handleActiveIdChange} />}
-        </div>
-      </NaturalMain.Content>
-    </NaturalMain.Root>
+    <div
+      role='none'
+      className={mx(
+        'bs-full grid overflow-hidden bg-toolbarSurface',
+        showNavBar ? 'grid-rows-[var(--rail-action)_1fr_var(--toolbar-size)]' : 'grid-rows-[var(--rail-action)_1fr]',
+      )}
+      {...attentionAttrs}
+    >
+      <AppBar {...appBarProps} />
+      <article className='bs-full overflow-hidden bg-baseSurface'>
+        <Surface.Surface
+          key={id}
+          role='article'
+          data={data}
+          limit={1}
+          fallback={ContentError}
+          placeholder={placeholder}
+        />
+      </article>
+      {showNavBar && <NavBar classNames='border-bs border-subduedSeparator' actions={actions} onAction={onAction} />}
+    </div>
   );
 };
 
-// TODO(wittjosiah): Factor out. Copied from deck plugin.
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
+Main.displayName = MAIN_NAME;

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

@@ -0,0 +1,164 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
+
+import { withTheme } from '@dxos/react-ui/testing';
+import { type ActionGraphProps, createGapSeparator, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { withRegistry } from '@dxos/storybook-utils';
+
+import { translations } from '../../translations';
+
+import { NavBar } from './NavBar';
+
+const MAIN_MENU_GROUP_ID = 'navbar-main-menu';
+
+const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
+
+const buildCompanionOnlyActions = (): ActionGraphProps => {
+  const result: ActionGraphProps = { nodes: [], edges: [] };
+  const companions = [
+    createMenuAction('companion-browse', () => console.log('Browse'), {
+      icon: 'ph--house--regular',
+      label: 'Browse',
+      iconOnly: true,
+    }),
+    createMenuAction('companion-notifications', () => console.log('Notifications'), {
+      icon: 'ph--bell--regular',
+      label: 'Notifications',
+      iconOnly: true,
+    }),
+    createMenuAction('companion-profile', () => console.log('Profile'), {
+      icon: 'ph--user--regular',
+      label: 'Profile',
+      iconOnly: true,
+    }),
+  ];
+  result.nodes.push(...companions);
+  result.edges.push(...companions.map((c) => ({ source: 'root', target: c.id })));
+  return result;
+};
+
+const buildDefaultActions = (): ActionGraphProps => {
+  const result: ActionGraphProps = { nodes: [], edges: [] };
+  const gapSeparator = createGapSeparator('navbar-gap');
+  const mainMenuGroup = createMenuItemGroup(MAIN_MENU_GROUP_ID, {
+    variant: 'dropdownMenu',
+    icon: 'ph--plus--regular',
+    iconOnly: true,
+    label: 'Main menu',
+    testId: 'simpleLayoutPlugin.addSpace',
+  });
+  const companions = [
+    createMenuAction('companion-browse', () => console.log('Browse'), {
+      icon: 'ph--house--regular',
+      label: 'Browse',
+      iconOnly: true,
+    }),
+    createMenuAction('companion-notifications', () => console.log('Notifications'), {
+      icon: 'ph--bell--regular',
+      label: 'Notifications',
+      iconOnly: true,
+    }),
+  ];
+  const menuActions = [
+    createMenuAction('action-create-space', () => console.log('Create space'), {
+      icon: 'ph--planet--regular',
+      label: 'Create space',
+    }),
+    createMenuAction('action-join-space', () => console.log('Join space'), {
+      icon: 'ph--sign-in--regular',
+      label: 'Join space',
+    }),
+    createMenuAction('action-settings', () => console.log('Settings'), {
+      icon: 'ph--gear--regular',
+      label: 'Settings',
+    }),
+  ];
+  result.nodes.push(...companions, ...gapSeparator.nodes, mainMenuGroup, ...menuActions);
+  result.edges.push(
+    ...companions.map((c) => ({ source: 'root', target: c.id })),
+    ...gapSeparator.edges,
+    { source: 'root', target: mainMenuGroup.id },
+    ...menuActions.map((action) => ({ source: MAIN_MENU_GROUP_ID, target: action.id })),
+  );
+  return result;
+};
+
+const meta = {
+  title: 'plugins/plugin-simple-layout/NavBar',
+  component: NavBar,
+  decorators: [withTheme(), withRegistry],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof NavBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const DefaultStory = ({ onAction }: { onAction: (action: { id: string }) => void }) => {
+  const actions = useMemo(() => Atom.make(buildDefaultActions()).pipe(Atom.keepAlive), []);
+
+  return <NavBar classNames='border-bs border-separator' actions={actions} onAction={onAction} />;
+};
+
+export const Default: Story = {
+  tags: ['test'],
+  args: {
+    onAction: fn(),
+  } as any,
+  render: (args: any) => <DefaultStory onAction={args.onAction} />,
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify the navbar renders with the toolbar.
+    await expect(canvas.getByRole('toolbar')).toBeInTheDocument();
+
+    // Test companion action click (Browse button).
+    const browseButton = canvas.getByRole('button', { name: /browse/i });
+    await expect(browseButton).toBeInTheDocument();
+    await userEvent.click(browseButton);
+    await expect(args.onAction).toHaveBeenCalledTimes(1);
+    await expect((args.onAction as Mock).mock.calls[0][0]).toHaveProperty('id', 'companion-browse');
+
+    // Test dropdown menu opens and action fires.
+    const menuTrigger = canvas.getByRole('button', { name: /main menu/i });
+    await expect(menuTrigger).toBeInTheDocument();
+    await userEvent.click(menuTrigger);
+
+    // Wait for menu to open and click an action (menu items render in a portal).
+    const createSpaceAction = await screen.findByRole('menuitem', { name: /create space/i });
+    await userEvent.click(createSpaceAction);
+    await expect(args.onAction).toHaveBeenCalledTimes(2);
+    await expect((args.onAction as Mock).mock.calls[1][0]).toHaveProperty('id', 'action-create-space');
+  },
+};
+
+const CompanionsOnlyStory = () => {
+  const actions = useMemo(() => Atom.make(buildCompanionOnlyActions()).pipe(Atom.keepAlive), []);
+
+  return <NavBar actions={actions} onAction={(action) => console.log('Action:', action.id)} />;
+};
+
+export const CompanionsOnly: Story = {
+  args: {} as any,
+  render: () => <CompanionsOnlyStory />,
+};
+
+const EmptyStory = () => {
+  const actions = useMemo(() => Atom.make(buildEmptyActions()).pipe(Atom.keepAlive), []);
+
+  return <NavBar actions={actions} onAction={(action) => console.log('Action:', action.id)} />;
+};
+
+export const Empty: Story = {
+  args: {} as any,
+  render: () => <EmptyStory />,
+};

package/src/components/SimpleLayout/NavBar.tsx

@@ -2,96 +2,39 @@
 // 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 { type ThemedClassName } from '@dxos/react-ui';
 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 { meta } from '../../meta';
-
-const buttonProps = {
-  iconOnly: true,
-  size: 6 as Size,
-  classNames: 'aspect-square',
-};
-
-export type NavBarProps = {
-  activeId?: string;
-  onActiveIdChange?: (nextActiveId: string | null) => void;
-};
-
-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';
+  type ActionExecutor,
+  type ActionGraphProps,
+  MenuProvider,
+  ToolbarMenu,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
+import { mx } from '@dxos/ui-theme';
+
+const NAVBAR_NAME = 'SimpleLayout.NavBar';
+
+export type NavBarProps = ThemedClassName<{
+  /** Action graph atom for the toolbar. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Action executor callback. */
+  onAction?: ActionExecutor;
+}>;
+
+/**
+ * Presentational navbar component that renders a toolbar from an action graph.
+ */
+export const NavBar = ({ classNames, actions, onAction }: NavBarProps) => {
+  const menu = 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>
+    <MenuProvider {...menu} onAction={onAction} alwaysActive>
+      <ToolbarMenu density='coarse' classNames={mx(classNames)} />
+    </MenuProvider>
   );
 };
+
+NavBar.displayName = NAVBAR_NAME;

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

@@ -5,14 +5,15 @@
 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, Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 import { ClientOperation, 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { translations as searchTranslation } from '@dxos/react-ui-searchlist';
 import { Collection } from '@dxos/schema';
 
@@ -24,18 +25,18 @@ import { translations } from '../../translations';
 import { SimpleLayout } from './SimpleLayout';
 
 const TestPlugin = Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
   Plugin.addModule(({ isPopover = false }) => ({
     id: Capability.getModuleTag(State),
-    activatesOn: Common.ActivationEvent.Startup,
-    activatesAfter: [Common.ActivationEvent.LayoutReady],
+    activatesOn: ActivationEvents.Startup,
+    activatesAfter: [AppActivationEvents.LayoutReady],
     activate: () => State({ initialState: { isPopover } } satisfies SimpleLayoutStateOptions),
   })),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
   Plugin.addModule({
     id: 'setup',
-    activatesOn: Common.ActivationEvent.OperationInvokerReady,
+    activatesOn: ActivationEvents.OperationInvokerReady,
     activate: Effect.fnUntraced(function* () {
-      const { invoke } = yield* Capability.get(Common.Capability.OperationInvoker);
+      const { invoke } = yield* Capability.get(Capabilities.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' });
@@ -69,17 +70,10 @@ const createPluginManager = ({ isPopover }: { isPopover: boolean }) => {
     plugins: [
       ...corePlugins(),
       ClientPlugin({
-        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' });
-            });
-          }),
+        types: [Collection.Collection],
       }),
-      SpacePlugin({}),
       SearchPlugin(),
+      SpacePlugin({}),
       TestPlugin({ isPopover }),
     ],
   });
@@ -98,10 +92,22 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * NOTE: To expose to iphone on network:
+ * `moon run storybook-react:serve dev -H 0.0.0.0`
+ */
 export const Default: Story = {
-  decorators: [withTheme, createPluginManager({ isPopover: false })],
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'relative' }),
+    createPluginManager({ isPopover: false }),
+  ],
 };
 
 export const Popover: Story = {
-  decorators: [withTheme, createPluginManager({ isPopover: true })],
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'relative' }),
+    createPluginManager({ isPopover: true }),
+  ],
 };