@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.21d9917

package/src/components/SimpleLayout/NavBar.tsx

@@ -6,33 +6,18 @@ import React from 'react';
 
 import { useAppGraph } from '@dxos/app-framework/react';
 import { Node, useActionRunner, useConnections } from '@dxos/plugin-graph';
-import {
-  Avatar,
-  Button,
-  ButtonGroup,
-  DensityProvider,
-  IconButton,
-  type Size,
-  Tooltip,
-  useTranslation,
-} from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, Toolbar, Tooltip, useTranslation } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider } from '@dxos/react-ui-menu';
-import { mx, surfaceZIndex } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
-const buttonProps = {
-  iconOnly: true,
-  size: 6 as Size,
-  classNames: 'aspect-square',
-};
-
-export type NavBarProps = {
+export type NavBarProps = ThemedClassName<{
   activeId?: string;
   onActiveIdChange?: (nextActiveId: string | null) => void;
-};
+}>;
 
-export const NavBar = ({ activeId, onActiveIdChange }: NavBarProps) => {
+export const NavBar = ({ classNames, activeId, onActiveIdChange }: NavBarProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();
@@ -43,16 +28,17 @@ export const NavBar = ({ activeId, onActiveIdChange }: NavBarProps) => {
   const isBrowseActive = activeId !== 'notifications' && activeId !== 'profile';
 
   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' }),
-        )}
-      >
+    <Toolbar.Root classNames={mx('justify-center', classNames)}>
+      <MenuProvider onAction={runAction}>
+        <DropdownMenu.Root items={menuActions}>
+          <Tooltip.Trigger asChild content={t('app menu label')}>
+            <DropdownMenu.Trigger asChild data-testid='spacePlugin.addSpace'>
+              <IconButton icon='ph--plus--regular' iconOnly label={t('main menu label')} />
+            </DropdownMenu.Trigger>
+          </Tooltip.Trigger>
+        </DropdownMenu.Root>
+      </MenuProvider>
+      {/*
         <ButtonGroup>
           <IconButton
             {...buttonProps}
@@ -82,16 +68,7 @@ export const NavBar = ({ activeId, onActiveIdChange }: NavBarProps) => {
             </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>
+      */}
+    </Toolbar.Root>
   );
 };

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

@@ -69,17 +69,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 }),
     ],
   });

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -9,7 +9,6 @@ import { PopoverContent, PopoverRoot } from '../Popover';
 
 import { Main } from './Main';
 
-// TODO(wittjosiah): Support toast.
 export const SimpleLayout = () => {
   return (
     <PopoverRoot>

package/src/components/Workspace/Workspace.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { Common } from '@dxos/app-framework';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { type Node, useConnections } from '@dxos/plugin-graph';
+import { Avatar, Icon, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Layout, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+import { useLoadDescendents } from '../hooks';
+
+export type WorkspaceProps = {
+  id: string;
+};
+
+/**
+ *
+ */
+// TODO(burdon): Rename or motivate name in comment.
+export const Workspace = ({ id }: WorkspaceProps) => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+
+  // Expand the workspace node to load its children.
+  useLoadDescendents(id);
+
+  // Get direct children of the workspace node.
+  const children = useConnections(graph, id, 'outbound');
+
+  const { results, handleSearch } = useSearchListResults({
+    items: children,
+    extract: (child) => toLocalizedString(child.properties.label, t),
+  });
+
+  return (
+    <Layout.Main toolbar>
+      <SearchList.Root onSearch={handleSearch}>
+        <Toolbar.Root>
+          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
+        </Toolbar.Root>
+        <SearchList.Content>
+          <Mosaic.Container asChild>
+            <Mosaic.Viewport padding>
+              <Mosaic.Stack items={results} getId={(child) => child.id} Tile={WorkspaceChildTile} />
+            </Mosaic.Viewport>
+          </Mosaic.Container>
+        </SearchList.Content>
+      </SearchList.Root>
+    </Layout.Main>
+  );
+};
+
+const WorkspaceChildTile: StackTileComponent<Node.Node> = ({ data }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokeSync } = useOperationInvoker();
+  const ref = useRef<HTMLDivElement>(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
+  const isSelected = selectedValue === data.id;
+
+  const name = toLocalizedString(data.properties.label, t);
+
+  const handleSelect = useCallback(
+    () => invokeSync(Common.LayoutOperation.Open, { subject: [data.id] }),
+    [invokeSync, data.id],
+  );
+
+  // Register this item with the search context.
+  useEffect(() => {
+    if (ref.current) {
+      registerItem(data.id, ref.current, handleSelect);
+    }
+
+    return () => unregisterItem(data.id);
+  }, [data.id, handleSelect, registerItem, unregisterItem]);
+
+  // Scroll into view when selected.
+  useEffect(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [isSelected]);
+
+  return (
+    <Card.Root
+      ref={ref}
+      role='button'
+      fullWidth
+      tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
+      data-selected={isSelected}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      onClick={handleSelect}
+    >
+      <Card.Toolbar density='coarse'>
+        <Avatar.Root>
+          <Avatar.Content
+            hue={data.properties.hue}
+            icon={data.properties.icon}
+            hueVariant='transparent'
+            variant='square'
+            size={12}
+            fallback={name}
+          />
+          <Avatar.Label>{name}</Avatar.Label>
+          <Icon icon='ph--caret-right--regular' />
+        </Avatar.Root>
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};

package/src/components/Workspace/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Workspace';

package/src/components/hooks.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { useAppGraph } from '@dxos/app-framework/react';
+import { Graph } from '@dxos/plugin-graph';
+
+/**
+ * Hook to expand graph nodes two levels deep when directly linked to.
+ */
+export const useLoadDescendents = (nodeId?: string) => {
+  const { graph } = useAppGraph();
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (nodeId) {
+        // First level: expand the node itself.
+        Graph.expand(graph, nodeId, 'outbound');
+        // Second level: expand each child.
+        Graph.getConnections(graph, nodeId, 'outbound').forEach((child) => {
+          Graph.expand(graph, child.id, 'outbound');
+        });
+      }
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [nodeId, graph]);
+};

package/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './ContentLoading';
 export * from './Home';
 export * from './Popover';
 export * from './SimpleLayout';
+export * from './Workspace';

package/src/hooks/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './useSpotlightDismiss';
+export * from './useSimpleLayoutState';

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/react';
+
+import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+
+export type SimpleLayoutStateHook = {
+  state: SimpleLayoutState;
+  updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => void;
+};
+
+export const useSimpleLayoutState = (): SimpleLayoutStateHook => {
+  const registry = useContext(RegistryContext);
+  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  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/types/capabilities.ts

@@ -2,7 +2,10 @@
 // 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';
 
@@ -24,14 +27,18 @@ export type SimpleLayoutState = {
   popoverVariant?: 'virtual' | 'react';
   popoverAnchor?: HTMLButtonElement;
   popoverAnchorId?: string;
+  popoverKind?: 'base' | 'card';
+  popoverTitle?: Label;
   popoverContent?: any;
 
   workspace: string;
   previousWorkspace: string;
   active?: string;
+  /** Stack of previously active item IDs for back navigation. */
+  history: string[];
 
   /** Whether running in popover window context (hides mobile-specific UI). */
   isPopover?: boolean;
 };
 
-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,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ActivationEvent, Common } from '@dxos/app-framework';
+
+import { SimpleLayoutState } from './capabilities';
+
+export namespace SimpleLayoutEvents {
+  /** Fired when SimpleLayoutState capability is ready. */
+  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(
+    SimpleLayoutState.identifier,
+  );
+}

package/src/types/index.ts

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