@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.03d5cd7b56

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/compute';
+
+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/compute';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateSidebar> = LayoutOperation.UpdateSidebar.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/plugin.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const SimpleLayoutPlugin = Plugin.lazy(meta, () => import('#plugin'));
+
+export { SimpleLayoutOperationHandlerSet } from './operations';

package/src/translations.ts

@@ -3,25 +3,33 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as searchTranslations } from '@dxos/react-ui-search/translations';
 
-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',
-        'error fallback message': 'An error occurred',
-        'search placeholder': 'Search...',
+        '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 → SimpleLayoutCapabilities.ts}

@@ -2,36 +2,40 @@
 // Copyright 2025 DXOS.org
 //
 
+// @import-as-namespace
+
+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';
 
-// 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';
   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';
   popoverVariant?: 'virtual' | 'react';
   popoverAnchor?: HTMLButtonElement;
   popoverAnchorId?: string;
-  popoverContent?: any;
-
-  workspace: string;
-  previousWorkspace: string;
-  active?: string;
-
-  /** Whether running in popover window context (hides mobile-specific UI). */
+  popoverKind?: 'base' | 'card';
+  popoverTitle?: Label;
+  popoverContent?: { component: string; props?: any } | { subject: any } | null;
+  drawerState: DrawerState;
+  history: string[];
   isPopover?: boolean;
+  companionVariant?: string;
 };
 
-export const SimpleLayoutState = Capability.make<SimpleLayoutState>(`${meta.id}/state`);
+export const State = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}.state`);

package/src/types/SimpleLayoutEvents.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @import-as-namespace
+
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+
+import * as SimpleLayoutCapabilities from './SimpleLayoutCapabilities';
+
+/** Fired when State capability is ready. */
+export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(
+  SimpleLayoutCapabilities.State.identifier,
+);

package/src/types/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './capabilities';
+export * as SimpleLayoutCapabilities from './SimpleLayoutCapabilities';
+export * as SimpleLayoutEvents from './SimpleLayoutEvents';

package/src/capabilities/operation-resolver/index.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Capability, Capability as Capability$ } from '@dxos/app-framework';
-
-export const OperationResolver: Capability.LazyCapability = Capability$.lazy(
-  'OperationResolver',
-  () => import('./operation-resolver'),
-);

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -1,135 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common } from '@dxos/app-framework';
-import { Operation, OperationResolver } from '@dxos/operation';
-
-import { SimpleLayoutState } from '../../types';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    return Capability.contributes(Common.Capability.OperationResolver, [
-      //
-      // UpdateSidebar - No-op for simple layout.
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdateSidebar,
-        handler: () => Effect.void,
-      }),
-
-      //
-      // UpdateComplementary - No-op for simple layout.
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdateComplementary,
-        handler: () => Effect.void,
-      }),
-
-      //
-      // UpdateDialog
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdateDialog,
-        handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          layout.dialogOpen = input.state ?? Boolean(input.subject);
-          layout.dialogType = input.type ?? 'default';
-          layout.dialogBlockAlign = input.blockAlign ?? 'center';
-          layout.dialogOverlayClasses = input.overlayClasses;
-          layout.dialogOverlayStyle = input.overlayStyle;
-          layout.dialogContent = input.subject ? { component: input.subject, props: input.props } : null;
-        }),
-      }),
-
-      //
-      // UpdatePopover
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdatePopover,
-        handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          layout.popoverOpen = input.state ?? Boolean(input.subject);
-          layout.popoverContent =
-            typeof input.subject === 'string'
-              ? { component: input.subject, props: input.props }
-              : input.subject
-                ? { subject: input.subject }
-                : undefined;
-          layout.popoverSide = input.side;
-          layout.popoverVariant = input.variant;
-          if (input.variant === 'virtual') {
-            layout.popoverAnchor = input.anchor;
-          } else {
-            layout.popoverAnchorId = input.anchorId;
-          }
-        }),
-      }),
-
-      //
-      // SwitchWorkspace
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.SwitchWorkspace,
-        handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
-          //  Ideally this should be worked into the data model in a generic way.
-          if (!layout.workspace.startsWith('!')) {
-            layout.previousWorkspace = layout.workspace;
-          }
-          layout.workspace = input.subject;
-          layout.active = undefined;
-        }),
-      }),
-
-      //
-      // RevertWorkspace
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.RevertWorkspace,
-        handler: Effect.fnUntraced(function* () {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          yield* Operation.invoke(Common.LayoutOperation.SwitchWorkspace, {
-            subject: layout.previousWorkspace,
-          });
-        }),
-      }),
-
-      //
-      // Open
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.Open,
-        handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          layout.active = input.subject[0];
-        }),
-      }),
-
-      //
-      // Close
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.Close,
-        handler: Effect.fnUntraced(function* () {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          layout.active = undefined;
-        }),
-      }),
-
-      //
-      // Set
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.Set,
-        handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(SimpleLayoutState);
-          layout.active = input.subject[0];
-        }),
-      }),
-    ]);
-  }),
-);

package/src/capabilities/react-root/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));

package/src/capabilities/state/index.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const State = Capability.lazy('State', () => import('./state'));
-
-export type { SimpleLayoutStateOptions } from './state';

package/src/capabilities/state/state.tsx

@@ -1,60 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
-
-import { type SimpleLayoutState } from '../../types';
-import { SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
-
-const defaultState: SimpleLayoutState = {
-  dialogOpen: false,
-  workspace: 'default',
-  previousWorkspace: 'default',
-  isPopover: false,
-};
-
-export type SimpleLayoutStateOptions = {
-  initialState?: Partial<SimpleLayoutState>;
-};
-
-export default Capability.makeModule(({ initialState }: SimpleLayoutStateOptions = {}) =>
-  Effect.sync(() => {
-    const state = live<SimpleLayoutState>({ ...defaultState, ...initialState });
-
-    const layout = live<Common.Capability.Layout>({
-      get mode() {
-        return 'simple';
-      },
-      get dialogOpen() {
-        return state.dialogOpen;
-      },
-      get sidebarOpen() {
-        return false;
-      },
-      get complementarySidebarOpen() {
-        return false;
-      },
-      get workspace() {
-        return state.workspace;
-      },
-      get active() {
-        return state.active ? [state.active] : [];
-      },
-      get inactive() {
-        return [];
-      },
-      get scrollIntoView() {
-        return undefined;
-      },
-    });
-
-    return [
-      Capability.contributes(SimpleLayoutStateCapability, state),
-      Capability.contributes(Common.Capability.Layout, layout),
-    ];
-  }),
-);

package/src/components/ContentError.tsx

@@ -1,23 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { useTranslation } from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/ui-theme';
-
-import { meta } from '../meta';
-
-// TODO(burdon): Factor out.
-export const ContentError = ({ error }: { error?: Error }) => {
-  const { t } = useTranslation(meta.id);
-  const errorString = error?.toString() ?? '';
-  return (
-    <div role='none' className='grid place-items-center overflow-y-auto attention-surface'>
-      <p role='alert' className={mx(descriptionMessage, 'p-2 break-all rounded-sm')}>
-        {error ? errorString : t('error fallback message')}
-      </p>
-    </div>
-  );
-};

package/src/components/SimpleLayout/Banner.tsx

@@ -1,60 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { useCapability, useOperationInvoker } from '@dxos/app-framework/react';
-import { type Node } from '@dxos/plugin-graph';
-import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { mx, osTranslations, surfaceZIndex } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-import { SimpleLayoutState } from '../../types';
-
-export type BannerProps = {
-  node?: Node.Node;
-};
-
-export const Banner = ({ node }: BannerProps) => {
-  const { t } = useTranslation(meta.id);
-  const layout = useCapability(SimpleLayoutState);
-  const { invokePromise } = useOperationInvoker();
-  const label = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: osTranslations });
-
-  const handleClick = useCallback(async () => {
-    if (layout.active) {
-      await invokePromise(Common.LayoutOperation.Close, { subject: [layout.active] });
-    } else {
-      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: 'default' });
-    }
-  }, [invokePromise, layout.active]);
-
-  return (
-    // Note that the HTML5 element `header` has a default role of `banner`, hence the name of this component.
-    // It should not be confused with the `heading` role (elements h1-6).
-    // TODO(burdon): Fixed or not?
-    <header
-      className={mx(
-        '_fixed flex items-center gap-2 pli-2 block-start-0 inset-inline-0 bs-[--dx-mobile-topbar-content-height,48px] bg-baseSurface border-be border-separator',
-        'grid grid-cols-[min-content_1fr_min-content]',
-        surfaceZIndex({ level: 'menu' }),
-      )}
-    >
-      {node ? (
-        <IconButton
-          iconOnly
-          variant='ghost'
-          icon='ph--caret-left--regular'
-          label={t('back label')}
-          onClick={handleClick}
-        />
-      ) : (
-        <div />
-      )}
-      <h1 className={'grow text-center truncate font-medium'}>{label}</h1>
-      {/* TODO(burdon): Menu. */}
-    </header>
-  );
-};

package/src/components/SimpleLayout/NavBarstories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { corePlugins } from '@dxos/plugin-testing';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { NavBar } from './NavBar';
-
-const meta = {
-  title: 'plugins/plugin-simple-layout/NavBar',
-  component: NavBar,
-  decorators: [
-    withTheme,
-    withPluginManager({
-      plugins: [...corePlugins()],
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-  argTypes: {
-    onActiveIdChange: { action: 'activeIdChanged' },
-  },
-} satisfies Meta<typeof NavBar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    activeId: undefined,
-  },
-};
-
-export const BrowseActive: Story = {
-  args: {
-    activeId: 'some-document',
-  },
-};
-
-export const NotificationsActive: Story = {
-  args: {
-    activeId: 'notifications',
-  },
-};
-
-export const ProfileActive: Story = {
-  args: {
-    activeId: 'profile',
-  },
-};