@dxos/plugin-simple-layout 0.8.4-main.bc674ce → 0.8.4-main.d05673bc65

package/src/hooks/useAppBarProps.ts

@@ -0,0 +1,115 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+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 { invokeSync } = 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',
+        }));
+
+        // Add alternate-tree action (e.g. Settings) from the workspace node.
+        const workspaceConnections = state.workspace ? get(graph.connections(state.workspace, 'child')) : [];
+        const alternateTreeNode = workspaceConnections.find(
+          (node: Node.Node) => node.properties.disposition === 'alternate-tree',
+        );
+        if (alternateTreeNode && activeId !== alternateTreeNode.id) {
+          const settingsAction = {
+            id: `appbar-settings-${alternateTreeNode.id}`,
+            type: Node.ActionType,
+            data: () => Effect.sync(() => invokeSync(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
+            properties: {
+              label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
+              icon: alternateTreeNode.properties.icon ?? 'ph--placeholder--regular',
+            },
+          };
+          nodes.push(settingsAction);
+          edges.push({ source: 'root', target: settingsAction.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) {
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      } else {
+        // Otherwise, close (which will pop from history or clear active).
+        invokeSync(LayoutOperation.Close, { subject: [state.active] });
+      }
+    } else {
+      invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+    }
+  }, [graph, invokeSync, 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

@@ -4,16 +4,19 @@
 
 import { useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useConnections } from '@dxos/plugin-graph';
 import { byPosition } from '@dxos/util';
 
-// TODO(wittjosiah): Factor out to shared location with plugin-deck.
-const PLANK_COMPANION_TYPE = 'dxos.org/plugin/deck/plank-companion';
+import { PLANK_COMPANION_TYPE } from './actions';
 
-export const useCompanions = (id?: string) => {
+/**
+ * @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, id);
+  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]);
 };

package/src/hooks/useDrawerActions.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import { useMemo } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
+import { useTranslation } from '@dxos/react-ui';
+import { type ActionExecutor, type ActionGraphProps, createGapSeparator } from '@dxos/react-ui-menu';
+
+import { useMobileLayout } from '../components';
+import { meta } from '../meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+
+import { createCompanionActions } from './actions';
+import { useSimpleLayoutState } from './useSimpleLayoutState';
+
+export type DrawerActions = {
+  /** Action graph atom for the drawer. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Action executor callback. */
+  onAction: ActionExecutor;
+};
+
+/**
+ * Builds the drawer actions including companion tabs and toolbar buttons.
+ */
+export const useDrawerActions = (consumerName: string): DrawerActions => {
+  const { t } = useTranslation(meta.id);
+  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+  const { updateState } = useSimpleLayoutState();
+  const { keyboardOpen } = useMobileLayout(consumerName);
+
+  // Create a computed atom that derives everything from graph connections and state.
+  const actionsAtom = useMemo(
+    () =>
+      Atom.make((get): ActionGraphProps => {
+        // Derive drawer state from state atom.
+        const state = get(stateAtom);
+
+        // Add companion tab actions.
+        const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
+          idPrefix: 'drawer',
+          selectedVariant: state.companionVariant,
+          updateState,
+        });
+
+        // Add gap separator before toolbar buttons.
+        const gapSeparator = createGapSeparator('drawer-gap');
+        nodes.push(...gapSeparator.nodes);
+        edges.push(...gapSeparator.edges);
+
+        // Add expand/collapse toggle button (hidden when keyboard is open).
+        if (!keyboardOpen) {
+          const isExpanded = state.drawerState === 'expanded';
+          const toggleExpandAction = {
+            id: 'drawer-toggle-expand',
+            type: Node.ActionType,
+            properties: {
+              icon: isExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular',
+              label: isExpanded ? t('collapse drawer label') : t('expand drawer label'),
+              iconOnly: true,
+            },
+            data: () =>
+              Effect.sync(() => updateState((state) => ({ ...state, drawerState: isExpanded ? 'open' : 'expanded' }))),
+          };
+          nodes.push(toggleExpandAction);
+          edges.push({ source: 'root', target: toggleExpandAction.id, relation: 'child' });
+        }
+
+        // Add close button.
+        const closeAction = {
+          id: 'drawer-close',
+          type: Node.ActionType,
+          properties: {
+            icon: 'ph--x--regular',
+            label: t('close drawer label'),
+            iconOnly: true,
+          },
+          data: () =>
+            Effect.sync(() =>
+              updateState((state) => ({ ...state, drawerState: 'closed', companionVariant: undefined })),
+            ),
+        };
+        nodes.push(closeAction);
+        edges.push({ source: 'root', target: closeAction.id, relation: 'child' });
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom, updateState, keyboardOpen, t],
+  );
+
+  return { actions: actionsAtom, onAction: runAction };
+};

package/src/hooks/useNavbarActions.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
+import { useTranslation } from '@dxos/react-ui';
+import {
+  type ActionExecutor,
+  type ActionGraphProps,
+  createGapSeparator,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
+
+import { meta } from '../meta';
+import { SimpleLayoutState } from '../types';
+
+import { createCompanionActions } from './actions';
+import { useSimpleLayoutState } from './useSimpleLayoutState';
+
+const MAIN_MENU_GROUP_ID = 'navbar-main-menu';
+
+export type NavbarActions = {
+  /** Action graph atom for the navbar. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Action executor callback. */
+  onAction: ActionExecutor;
+};
+
+/**
+ * Builds the navbar actions including companion icons, separator, and main menu dropdown.
+ * Derives everything from graph connection atoms for proper reactivity.
+ */
+export const useNavbarActions = (): NavbarActions => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+  const stateAtom = useCapability(SimpleLayoutState);
+  const { updateState } = useSimpleLayoutState();
+
+  // Create a computed atom that derives everything from graph connections and state.
+  const actionsAtom = useMemo(
+    () =>
+      Atom.make((get): ActionGraphProps => {
+        // Add companion actions.
+        const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
+          idPrefix: 'navbar',
+          updateState,
+        });
+
+        // Add gap separator.
+        const gapSeparator = createGapSeparator('navbar-gap');
+        nodes.push(...gapSeparator.nodes);
+        edges.push(...gapSeparator.edges);
+
+        // Add main menu dropdown group.
+        const mainMenuGroup = createMenuItemGroup(MAIN_MENU_GROUP_ID, {
+          variant: 'dropdownMenu',
+          icon: 'ph--list--regular',
+          iconOnly: true,
+          label: t('main menu label'),
+          testId: 'simpleLayoutPlugin.addSpace',
+        });
+        nodes.push(mainMenuGroup);
+        edges.push({ source: 'root', target: mainMenuGroup.id, relation: 'child' });
+
+        // Get menu actions from root actions (on 'action' edge relation).
+        const rootActions = get(graph.actions(Node.RootId));
+        const menuActions = rootActions.filter((node) => node.properties.disposition === 'menu');
+
+        // Add menu actions as children of the dropdown group.
+        menuActions.forEach((menuAction) => {
+          nodes.push(menuAction as ActionGraphProps['nodes'][number]);
+          edges.push({ source: MAIN_MENU_GROUP_ID, target: menuAction.id, relation: 'child' });
+        });
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom, updateState, t],
+  );
+
+  return { actions: actionsAtom, onAction: runAction };
+};

package/src/hooks/useSimpleLayoutState.ts

@@ -5,18 +5,18 @@
 import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { useCallback, useContext } from 'react';
 
-import { useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
 
-import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+import { SimpleLayoutState } from '../types';
 
-export type SimpleLayoutStateHook = {
+export type UseSimpleLayoutState = {
   state: SimpleLayoutState;
   updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => void;
 };
 
-export const useSimpleLayoutState = (): SimpleLayoutStateHook => {
+export const useSimpleLayoutState = (): UseSimpleLayoutState => {
   const registry = useContext(RegistryContext);
-  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const stateAtom = useCapability(SimpleLayoutState);
   const state = useAtomValue(stateAtom);
 
   const updateState = useCallback(

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/simple-layout',
+  id: 'org.dxos.plugin.simple-layout',
   name: 'Simple Layout',
   description: trim`
     Minimal layout plugin for simplified UI contexts like popover windows.

package/src/types/capabilities.ts

@@ -5,15 +5,21 @@
 import { type Atom } from '@effect-atom/atom-react';
 
 import { Capability } from '@dxos/app-framework';
-import { type DrawerState, type Label } from '@dxos/react-ui';
+import { type Label } from '@dxos/react-ui';
 
 import { meta } from '../meta';
 
+export type DrawerState = 'closed' | 'open' | 'expanded';
+
 // TODO(wittjosiah): Handle toasts.
 export type SimpleLayoutState = {
   /** Data to be passed to the main content Surface. */
   content?: any;
 
+  previousWorkspace: string;
+  workspace: string;
+  active?: string;
+
   dialogOpen: boolean;
   dialogType?: 'default' | 'alert';
   dialogBlockAlign?: 'start' | 'center' | 'end';
@@ -31,9 +37,9 @@ export type SimpleLayoutState = {
   popoverTitle?: Label;
   popoverContent?: any;
 
-  workspace: string;
-  previousWorkspace: string;
-  active?: string;
+  /** Bottom drawer state. */
+  drawerState: DrawerState;
+
   /** Stack of previously active item IDs for back navigation. */
   history: string[];
 
@@ -42,8 +48,6 @@ export type SimpleLayoutState = {
 
   /** Variant of the companion to display in the drawer (e.g., "comments", "assistant-chat"). */
   companionVariant?: string;
-  /** State of the companion drawer. */
-  drawerState?: DrawerState;
 };
 
-export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}/state`);
+export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}.state`);

package/src/types/events.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActivationEvent, Common } from '@dxos/app-framework';
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { SimpleLayoutState } from './capabilities';
 
 export namespace SimpleLayoutEvents {
   /** Fired when SimpleLayoutState capability is ready. */
-  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(
     SimpleLayoutState.identifier,
   );
 }