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

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>
-  );
-};