@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.1068cf700f

package/src/hooks/useSimpleLayoutState.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { useCallback, useContext } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+
+import { SimpleLayoutState } from '../types';
+
+export type UseSimpleLayoutState = {
+  state: SimpleLayoutState;
+  updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => void;
+};
+
+export const useSimpleLayoutState = (): UseSimpleLayoutState => {
+  const registry = useContext(RegistryContext);
+  const stateAtom = useCapability(SimpleLayoutState);
+  const state = useAtomValue(stateAtom);
+
+  const updateState = useCallback(
+    (fn: (current: SimpleLayoutState) => SimpleLayoutState) => {
+      registry.set(stateAtom, fn(registry.get(stateAtom)));
+    },
+    [registry, stateAtom],
+  );
+
+  return { state, updateState };
+};

package/src/translations.ts

@@ -20,8 +20,14 @@ export const translations = [
         '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',
       },
     },
   },

package/src/types/capabilities.ts

@@ -2,15 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
+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';
 
+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';
@@ -24,14 +33,21 @@ export type SimpleLayoutState = {
   popoverVariant?: 'virtual' | 'react';
   popoverAnchor?: HTMLButtonElement;
   popoverAnchorId?: string;
+  popoverKind?: 'base' | 'card';
+  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[];
 
   /** Whether running in popover window context (hides mobile-specific UI). */
   isPopover?: boolean;
+
+  /** Variant of the companion to display in the drawer (e.g., "comments", "assistant-chat"). */
+  companionVariant?: string;
 };
 
-export const SimpleLayoutState = Capability.make<SimpleLayoutState>(`${meta.id}/state`);
+export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}/state`);

package/src/types/events.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 = AppActivationEvents.createStateEvent(
+    SimpleLayoutState.identifier,
+  );
+}

package/src/types/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './capabilities';
+export * from './events';

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',
-  },
-};