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

package/src/hooks/actions.ts

@@ -5,12 +5,13 @@
 import { type Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { type AppCapabilities, getCompanionVariant } from '@dxos/app-toolkit';
+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';
+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';
@@ -51,7 +52,7 @@ export const createCompanionActions = (
   const edges: ActionGraphProps['edges'] = [];
 
   companions.forEach((companion: Node.Node) => {
-    const companionVariant = getCompanionVariant(companion.id);
+    const companionVariant = getLinkedVariant(companion.id);
     const companionAction = {
       id: `${idPrefix}-companion-${companion.id}`,
       type: Node.ActionType,

package/src/hooks/useAppBarProps.ts

@@ -14,9 +14,9 @@ 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';
+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.
@@ -27,7 +27,7 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
   const stateAtom = useCapability(SimpleLayoutStateCapability);
   const state = useAtomValue(stateAtom);
   const { graph } = useAppGraph();
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const runAction = useActionRunner();
 
   // Derive activeId from state.
@@ -64,7 +64,7 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
           const settingsAction = {
             id: `appbar-settings-${alternateTreeNode.id}`,
             type: Node.ActionType,
-            data: () => Effect.sync(() => invokeSync(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
+            data: () => Effect.promise(() => invokePromise(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
             properties: {
               label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
               icon: alternateTreeNode.properties.icon ?? 'ph--placeholder--regular',
@@ -91,15 +91,15 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
 
       // If history is empty and this is a workspace, go to home.
       if (state.history.length === 0 && isWorkspace) {
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
       } else {
         // Otherwise, close (which will pop from history or clear active).
-        invokeSync(LayoutOperation.Close, { subject: [state.active] });
+        void invokePromise(LayoutOperation.Close, { subject: [state.active] });
       }
     } else {
-      invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
     }
-  }, [graph, invokeSync, state.active, state.history.length]);
+  }, [graph, invokePromise, state.active, state.history.length]);
 
   // Compute popover anchor ID.
   const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : undefined;

package/src/hooks/useDrawerActions.ts

@@ -12,9 +12,9 @@ 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 { useMobileLayout } from '#components';
+import { meta } from '#meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '#types';
 
 import { createCompanionActions } from './actions';
 import { useSimpleLayoutState } from './useSimpleLayoutState';
@@ -47,7 +47,7 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
         // Add companion tab actions.
         const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
           idPrefix: 'drawer',
-          selectedVariant: state.companionVariant,
+          selectedVariant: state.drawerState !== 'closed' ? state.companionVariant : undefined,
           updateState,
         });
 
@@ -64,7 +64,7 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
             type: Node.ActionType,
             properties: {
               icon: isExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular',
-              label: isExpanded ? t('collapse drawer label') : t('expand drawer label'),
+              label: isExpanded ? t('collapse-drawer.label') : t('expand-drawer.label'),
               iconOnly: true,
             },
             data: () =>
@@ -80,7 +80,7 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
           type: Node.ActionType,
           properties: {
             icon: 'ph--x--regular',
-            label: t('close drawer label'),
+            label: t('close-drawer.label'),
             iconOnly: true,
           },
           data: () =>

package/src/hooks/useNavbarActions.ts

@@ -16,8 +16,8 @@ import {
   createMenuItemGroup,
 } from '@dxos/react-ui-menu';
 
-import { meta } from '../meta';
-import { SimpleLayoutState } from '../types';
+import { meta } from '#meta';
+import { SimpleLayoutState } from '#types';
 
 import { createCompanionActions } from './actions';
 import { useSimpleLayoutState } from './useSimpleLayoutState';
@@ -62,7 +62,7 @@ export const useNavbarActions = (): NavbarActions => {
           variant: 'dropdownMenu',
           icon: 'ph--list--regular',
           iconOnly: true,
-          label: t('main menu label'),
+          label: t('main-menu.label'),
           testId: 'simpleLayoutPlugin.addSpace',
         });
         nodes.push(mainMenuGroup);

package/src/hooks/useSimpleLayoutState.ts

@@ -7,7 +7,7 @@ import { useCallback, useContext } from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 
-import { SimpleLayoutState } from '../types';
+import { SimpleLayoutState } from '#types';
 
 export type UseSimpleLayoutState = {
   state: SimpleLayoutState;

package/src/operations/close.ts

@@ -0,0 +1,34 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Close> = LayoutOperation.Close.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => {
+        if (state.history.length > 0) {
+          const newHistory = [...state.history];
+          const previousActive = newHistory.pop();
+          return {
+            ...state,
+            active: previousActive,
+            history: newHistory,
+          };
+        }
+        return {
+          ...state,
+          active: undefined,
+        };
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,16 @@
+// Copyright 2025 DXOS.org
+
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const SimpleLayoutOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./close'),
+  () => import('./open'),
+  () => import('./revert-workspace'),
+  () => import('./set'),
+  () => import('./set-layout-mode'),
+  () => import('./switch-workspace'),
+  () => import('./update-complementary'),
+  () => import('./update-dialog'),
+  () => import('./update-popover'),
+  () => import('./update-sidebar'),
+);

package/src/operations/open.ts

@@ -0,0 +1,63 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import {
+  AppCapabilities,
+  LayoutOperation,
+  createEdgeExistenceChecker,
+  validateNavigationTarget,
+} from '@dxos/app-toolkit';
+import { Context } from '@dxos/context';
+import { Operation } from '@dxos/operation';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperation.Open.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+      const { updateState } = yield* layoutStateAccess;
+      const id = input.subject[0];
+
+      // Validate navigation target, redirecting to 404 if not found.
+      const capabilities = yield* Capability.Service;
+      const pathResolvers = capabilities.getAll(AppCapabilities.NavigationPathResolver);
+      const checkRemoteExistence = yield* Capability.get(ClientCapabilities.Client).pipe(
+        Effect.map((client) =>
+          createEdgeExistenceChecker((spaceId, body) => client.edge.http.execQuery(new Context(), spaceId, body)),
+        ),
+        Effect.catchAll(() => Effect.succeed(undefined)),
+      );
+
+      const validatedId =
+        input.navigation === 'immediate'
+          ? id
+          : yield* validateNavigationTarget({
+              graph,
+              subjectId: id,
+              pathResolvers,
+              checkRemoteExistence,
+            });
+
+      updateState((state) => {
+        const newHistory = state.active ? [...state.history, state.active] : state.history;
+        const trimmedHistory =
+          newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
+        return {
+          ...state,
+          active: validatedId,
+          history: trimmedHistory,
+        };
+      });
+
+      return [validatedId];
+    }),
+  ),
+);
+
+export default handler;
+
+const MAX_HISTORY_LENGTH = 50;

package/src/operations/revert-workspace.ts

@@ -0,0 +1,22 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.RevertWorkspace> = LayoutOperation.RevertWorkspace.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const { getState } = yield* layoutStateAccess;
+      const state = getState();
+      yield* Operation.invoke(LayoutOperation.SwitchWorkspace, {
+        subject: state.previousWorkspace,
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/set-layout-mode.ts

@@ -0,0 +1,12 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SetLayoutMode> = LayoutOperation.SetLayoutMode.pipe(
+  Operation.withHandler(Effect.fnUntraced(function* () {})),
+);
+
+export default handler;

package/src/operations/set.ts

@@ -0,0 +1,23 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Set> = LayoutOperation.Set.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => ({
+        ...state,
+        active: input.subject[0],
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/state-access.ts

@@ -0,0 +1,19 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+
+import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+
+export const layoutStateAccess = Effect.gen(function* () {
+  const registry = yield* Capability.get(Capabilities.AtomRegistry);
+  const stateAtom = yield* Capability.get(SimpleLayoutStateCapability);
+
+  return {
+    getState: () => registry.get(stateAtom),
+    updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => {
+      registry.set(stateAtom, fn(registry.get(stateAtom)));
+    },
+  };
+});

package/src/operations/switch-workspace.ts

@@ -0,0 +1,26 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { isPinnedWorkspace, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = LayoutOperation.SwitchWorkspace.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => ({
+        ...state,
+        previousWorkspace: !isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
+        workspace: input.subject,
+        active: undefined,
+        history: [],
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-complementary.ts

@@ -0,0 +1,35 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateComplementary> =
+  LayoutOperation.UpdateComplementary.pipe(
+    Operation.withHandler(
+      Effect.fnUntraced(function* (input) {
+        const { updateState } = yield* layoutStateAccess;
+
+        if (input.state === 'closed') {
+          updateState((state) => ({
+            ...state,
+            drawerState: 'closed',
+            companionVariant: undefined,
+          }));
+        } else if (input.subject) {
+          const variant = getLinkedVariant(input.subject);
+          updateState((state) => ({
+            ...state,
+            companionVariant: variant,
+            drawerState: input.state === 'expanded' ? 'expanded' : 'open',
+          }));
+        }
+      }),
+    ),
+  );
+
+export default handler;

package/src/operations/update-dialog.ts

@@ -0,0 +1,28 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateDialog> = LayoutOperation.UpdateDialog.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => ({
+        ...state,
+        dialogOpen: input.state ?? Boolean(input.subject),
+        dialogType: input.type ?? 'default',
+        dialogBlockAlign: input.blockAlign ?? 'center',
+        dialogOverlayClasses: input.overlayClasses,
+        dialogOverlayStyle: input.overlayStyle,
+        dialogContent: input.subject ? { component: input.subject, props: input.props } : undefined,
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-popover.ts

@@ -0,0 +1,35 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdatePopover> = LayoutOperation.UpdatePopover.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => ({
+        ...state,
+        popoverOpen: input.state ?? Boolean(input.subject),
+        popoverKind: input.kind ?? 'base',
+        popoverTitle: input.kind === 'card' ? input.title : undefined,
+        popoverContent:
+          typeof input.subject === 'string'
+            ? { component: input.subject, props: input.props }
+            : input.subject
+              ? { subject: input.subject }
+              : undefined,
+        popoverSide: input.side,
+        popoverVariant: input.variant,
+        popoverAnchor: input.variant === 'virtual' ? input.anchor : state.popoverAnchor,
+        popoverAnchorId: input.variant !== 'virtual' ? input.anchorId : state.popoverAnchorId,
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-sidebar.ts

@@ -0,0 +1,12 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateSidebar> = LayoutOperation.UpdateSidebar.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/translations.ts

@@ -3,31 +3,33 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as searchTranslations } from '@dxos/react-ui-search';
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
 export const translations = [
+  ...searchTranslations,
   {
     'en-US': {
       [meta.id]: {
-        'plugin name': 'Simple layout',
-        'settings title': 'Simple layout settings',
-        'workspaces heading': 'Workspaces',
-        'settings heading': 'Settings',
-        'back label': 'Back',
-        'browse label': 'Browse',
-        'notifications label': 'Notifications',
-        'profile label': 'Profile',
-        'app menu label': 'App menu',
-        'main menu label': 'Main menu',
-        'companions menu label': 'Companions',
-        'error fallback message': 'An error occurred',
-        'search placeholder': 'Search...',
-        'drawer label': 'Drawer',
-        'close drawer label': 'Close drawer',
-        'expand drawer label': 'Expand drawer',
-        'collapse drawer label': 'Collapse drawer',
-        'actions menu label': 'Actions',
+        'plugin.name': 'Simple layout',
+        'settings.title': 'Simple layout settings',
+        'workspaces.heading': 'Workspaces',
+        'settings.heading': 'Settings',
+        'back.label': 'Back',
+        'browse.label': 'Browse',
+        'notifications.label': 'Notifications',
+        'profile.label': 'Profile',
+        'app-menu.label': 'App menu',
+        'main-menu.label': 'Main menu',
+        'companions-menu.label': 'Companions',
+        'error-fallback.message': 'An error occurred',
+        'drawer.label': 'Drawer',
+        'close-drawer.label': 'Close drawer',
+        'expand-drawer.label': 'Expand drawer',
+        'collapse-drawer.label': 'Collapse drawer',
+        'actions-menu.label': 'Actions',
+        'done.label': 'Done',
       },
     },
   },

package/src/types/capabilities.ts

@@ -7,7 +7,7 @@ import { type Atom } from '@effect-atom/atom-react';
 import { Capability } from '@dxos/app-framework';
 import { type Label } from '@dxos/react-ui';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export type DrawerState = 'closed' | 'open' | 'expanded';
 
@@ -26,7 +26,7 @@ export type SimpleLayoutState = {
   dialogOverlayClasses?: string;
   dialogOverlayStyle?: Record<string, any>;
   /** Data to be passed to the dialog Surface. */
-  dialogContent?: any;
+  dialogContent?: { component: string; props?: any } | null;
 
   popoverOpen?: boolean;
   popoverSide?: 'top' | 'right' | 'bottom' | 'left';
@@ -35,7 +35,7 @@ export type SimpleLayoutState = {
   popoverAnchorId?: string;
   popoverKind?: 'base' | 'card';
   popoverTitle?: Label;
-  popoverContent?: any;
+  popoverContent?: { component: string; props?: any } | { subject: any } | null;
 
   /** Bottom drawer state. */
   drawerState: DrawerState;