@dxos/plugin-simple-layout 0.8.4-main.69d29f4 → 0.8.4-main.7996785055

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

@@ -1,178 +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 { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
-
-/** Maximum number of items to keep in navigation history. */
-const MAX_HISTORY_LENGTH = 50;
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
-    const stateAtom = yield* Capability.get(SimpleLayoutStateCapability);
-
-    const getState = () => registry.get(stateAtom);
-    const updateState = (fn: (current: SimpleLayoutState) => SimpleLayoutState) => {
-      registry.set(stateAtom, fn(getState()));
-    };
-
-    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) {
-          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,
-          }));
-        }),
-      }),
-
-      //
-      // UpdatePopover
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.UpdatePopover,
-        handler: Effect.fnUntraced(function* (input) {
-          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,
-          }));
-        }),
-      }),
-
-      //
-      // SwitchWorkspace
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.SwitchWorkspace,
-        handler: Effect.fnUntraced(function* (input) {
-          updateState((state) => ({
-            ...state,
-            // 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.
-            previousWorkspace: !state.workspace.startsWith('!') ? state.workspace : state.previousWorkspace,
-            workspace: input.subject,
-            active: undefined,
-            // Clear history when switching workspaces.
-            history: [],
-          }));
-        }),
-      }),
-
-      //
-      // RevertWorkspace
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.RevertWorkspace,
-        handler: Effect.fnUntraced(function* () {
-          const state = getState();
-          yield* Operation.invoke(Common.LayoutOperation.SwitchWorkspace, {
-            subject: state.previousWorkspace,
-          });
-        }),
-      }),
-
-      //
-      // Open
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.Open,
-        handler: Effect.fnUntraced(function* (input) {
-          updateState((state) => {
-            // Push current active to history if it exists.
-            const newHistory = state.active ? [...state.history, state.active] : state.history;
-            // Limit history length to prevent memory issues.
-            const trimmedHistory =
-              newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
-            return {
-              ...state,
-              active: input.subject[0],
-              history: trimmedHistory,
-            };
-          });
-        }),
-      }),
-
-      //
-      // Close
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.Close,
-        handler: Effect.fnUntraced(function* () {
-          updateState((state) => {
-            // Pop from history if available.
-            if (state.history.length > 0) {
-              const newHistory = [...state.history];
-              const previousActive = newHistory.pop();
-              return {
-                ...state,
-                active: previousActive,
-                history: newHistory,
-              };
-            }
-            // No history, just clear active.
-            return {
-              ...state,
-              active: undefined,
-            };
-          });
-        }),
-      }),
-
-      //
-      // Set
-      //
-      OperationResolver.make({
-        operation: Common.LayoutOperation.Set,
-        handler: Effect.fnUntraced(function* (input) {
-          updateState((state) => ({
-            ...state,
-            active: input.subject[0],
-          }));
-        }),
-      }),
-    ]);
-  }),
-);

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,82 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
-import { Graph, Node } from '@dxos/plugin-graph';
-import { IconButton, type ThemedClassName, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { mx, osTranslations } from '@dxos/ui-theme';
-
-import { useSimpleLayoutState } from '../../hooks';
-import { meta } from '../../meta';
-
-/**
- * Check if an item is a direct child of a workspace or collection.
- * Returns true if any parent node has disposition 'workspace' or 'collection'.
- */
-const isWorkspaceOrCollectionChild = (graph: Graph.ReadableGraph, itemId: string): boolean => {
-  const parents = Graph.getConnections(graph, itemId, 'inbound');
-  return parents.some(
-    (node) => node.properties.disposition === 'workspace' || node.properties.disposition === 'collection',
-  );
-};
-
-export type BannerProps = ThemedClassName<{
-  node?: Node.Node;
-}>;
-
-export const Banner = ({ node, classNames }: BannerProps) => {
-  const { t } = useTranslation(meta.id);
-  const { state } = useSimpleLayoutState();
-  const { invokePromise } = useOperationInvoker();
-  const { graph } = useAppGraph();
-
-  const label = (node && toLocalizedString(node.properties.label, t)) ?? t('current app name', { ns: osTranslations });
-
-  // Check if current active item is a top-level workspace/collection child.
-  const isTopLevelItem = useMemo(() => {
-    if (!state.active) {
-      return false;
-    }
-    return isWorkspaceOrCollectionChild(graph, state.active);
-  }, [graph, state.active]);
-
-  const handleClick = useCallback(async () => {
-    if (state.active) {
-      // If history is empty and this is a top-level item, go to home.
-      if (state.history.length === 0 && isTopLevelItem) {
-        await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
-      } else {
-        // Otherwise, close (which will pop from history or clear active).
-        await invokePromise(Common.LayoutOperation.Close, { subject: [state.active] });
-      }
-    } else {
-      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
-    }
-  }, [invokePromise, state.active, state.history.length, isTopLevelItem]);
-
-  if (!node) {
-    return null;
-  }
-
-  return (
-    <Toolbar.Root role='banner' classNames={mx('grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)]', classNames)}>
-      {node.id !== Node.RootId ? (
-        <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>
-      <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label={t('menu label')} />
-    </Toolbar.Root>
-  );
-};

package/src/components/Workspace/Workspace.tsx

@@ -1,115 +0,0 @@
-//
-// 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>
-  );
-};