@dxos/plugin-simple-layout 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/capabilities/url-handler/url-handler.ts

@@ -1,80 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common } from '@dxos/app-framework';
-import { Node } from '@dxos/plugin-graph';
-
-import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
-
-/**
- * URL handler for simple layout that syncs browser URL with layout state.
- * URL format: /{workspace} or /{workspace}/{active}
- * Root is represented as / or /root.
- */
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    const { invokeSync } = yield* Capability.get(Common.Capability.OperationInvoker);
-
-    /**
-     * Handle navigation events (initial load and popstate).
-     * Parses URL and updates state accordingly.
-     */
-    const handleNavigation = () => {
-      const pathname = window.location.pathname;
-
-      // Parse URL segments: /{workspace}/{active}
-      const [_, nextWorkspace, nextActive] = pathname.split('/');
-
-      // Determine target workspace (empty or 'root' means Node.RootId).
-      const targetWorkspace = !nextWorkspace || nextWorkspace === 'root' ? Node.RootId : nextWorkspace;
-
-      // Navigate via operations (they will update state accordingly).
-      invokeSync(Common.LayoutOperation.SwitchWorkspace, { subject: targetWorkspace });
-      if (nextActive) {
-        invokeSync(Common.LayoutOperation.Open, { subject: [nextActive] });
-      }
-    };
-
-    // Handle initial URL and listen for browser navigation.
-    yield* Effect.sync(() => handleNavigation());
-    window.addEventListener('popstate', handleNavigation);
-
-    // Subscribe to state changes to update the URL.
-    let lastWorkspace: string | undefined;
-    let lastActive: string | undefined;
-    const unsubscribe = yield* Common.Capability.subscribeAtom(
-      SimpleLayoutStateCapability,
-      (state: SimpleLayoutState) => {
-        const { workspace, active } = state;
-
-        // Only update URL if relevant state changed.
-        if (workspace !== lastWorkspace || active !== lastActive) {
-          lastWorkspace = workspace;
-          lastActive = active;
-
-          // Build path: root is represented as /, other workspaces as /{workspace}.
-          let path: string;
-          if (workspace === Node.RootId) {
-            path = active ? `/${Node.RootId}/${active}` : '/';
-          } else {
-            path = active ? `/${workspace}/${active}` : `/${workspace}`;
-          }
-
-          if (window.location.pathname !== path) {
-            history.pushState(null, '', `${path}${window.location.search}`);
-          }
-        }
-      },
-    );
-
-    return Capability.contributes(Common.Capability.Null, null, () =>
-      Effect.sync(() => {
-        window.removeEventListener('popstate', handleNavigation);
-        unsubscribe();
-      }),
-    );
-  }),
-);

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,113 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { Fragment, useCallback, useMemo } from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
-import { Graph, Node, useActionRunner, useActions } from '@dxos/plugin-graph';
-import { IconButton, Popover, type ThemedClassName, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { DropdownMenu, MenuProvider } from '@dxos/react-ui-menu';
-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 runAction = useActionRunner();
-
-  const label = (node && toLocalizedString(node.properties.label, t)) ?? t('current app name', { ns: osTranslations });
-
-  // Get actions for the current node, filtered by disposition.
-  // NOTE: Graph expansion is handled by useLoadDescendents in Main.tsx.
-  const allActions = useActions(graph, node?.id);
-  const actions = useMemo(() => {
-    return allActions.filter((a) =>
-      ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition),
-    );
-  }, [allActions]);
-
-  // 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]);
-
-  // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId matches.
-  const AnchorRoot = node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
-
-  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>
-      {actions.length > 0 ? (
-        <AnchorRoot>
-          <MenuProvider onAction={runAction}>
-            <DropdownMenu.Root items={actions} caller={meta.id}>
-              <DropdownMenu.Trigger asChild>
-                <IconButton
-                  iconOnly
-                  variant='ghost'
-                  icon='ph--dots-three-vertical--regular'
-                  label={t('actions menu label')}
-                />
-              </DropdownMenu.Trigger>
-            </DropdownMenu.Root>
-          </MenuProvider>
-        </AnchorRoot>
-      ) : (
-        <span />
-      )}
-    </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>
-  );
-};