@dxos/plugin-search 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/components/SearchResultStack/SearchResultStack.tsx

@@ -0,0 +1,118 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type KeyboardEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { Entity } from '@dxos/echo';
+import { Card, Toolbar } from '@dxos/react-ui';
+import { ScrollArea } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
+import { Menu } from '@dxos/react-ui-menu';
+import { type MosaicTileProps, Mosaic, useMosaicContainer, Focus } from '@dxos/react-ui-mosaic';
+import { type SearchResult } from '@dxos/react-ui-search';
+
+//
+// SearchResultStack
+//
+
+export type SearchResultStackProps = {
+  results: SearchResult[];
+};
+
+export const SearchResultStack = composable<HTMLDivElement, SearchResultStackProps>(
+  ({ results, ...props }, forwardedRef) => {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const items = useMemo(() => results.map((result) => ({ result })), [results]);
+
+    const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        (document.activeElement as HTMLElement | null)?.click();
+      }
+    }, []);
+
+    return (
+      <Focus.Group asChild {...composableProps(props)} onKeyDown={handleKeyDown} ref={forwardedRef}>
+        <Mosaic.Container asChild>
+          <ScrollArea.Root orientation='vertical' padding centered>
+            <ScrollArea.Viewport ref={setViewport}>
+              <Mosaic.VirtualStack
+                Tile={SearchResultTile}
+                classNames='my-2'
+                gap={8}
+                items={items}
+                draggable={false}
+                getId={(item) => item.result.id}
+                getScrollElement={() => viewport}
+                estimateSize={() => 150}
+              />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Mosaic.Container>
+      </Focus.Group>
+    );
+  },
+);
+
+SearchResultStack.displayName = 'SearchResultStack';
+
+//
+// SearchResultTile
+//
+
+type SearchResultTileData = {
+  result: SearchResult;
+};
+
+type SearchResultTileProps = Pick<MosaicTileProps<SearchResultTileData>, 'location' | 'data' | 'current'>;
+
+/**
+ * Search result tile that uses Surface to render object content.
+ */
+const SearchResultTile = forwardRef<HTMLDivElement, SearchResultTileProps>(
+  ({ data, location, current }, forwardedRef) => {
+    const { result } = data;
+    const menuItems = useObjectMenuItems(result.object);
+    const { setCurrentId } = useMosaicContainer('SearchResultTile');
+
+    const handleCurrentChange = useCallback(() => {
+      setCurrentId(result.id);
+    }, [result.id, setCurrentId]);
+
+    return (
+      <Menu.Root>
+        <Mosaic.Tile
+          asChild
+          classNames='dx-hover dx-current dx-selected'
+          id={result.id}
+          data={data}
+          location={location}
+        >
+          <Focus.Item asChild current={current} onCurrentChange={handleCurrentChange}>
+            <Card.Root ref={forwardedRef} role='button' classNames='cursor-pointer'>
+              <Card.Header>
+                <Card.IconBlock />
+                <Card.Title>{result.label ?? (result.object && Entity.getLabel(result.object))}</Card.Title>
+                <Menu.Trigger asChild disabled={!menuItems?.length}>
+                  <Toolbar.IconButton
+                    iconOnly
+                    variant='ghost'
+                    icon='ph--dots-three-vertical--regular'
+                    label='Actions'
+                  />
+                </Menu.Trigger>
+                <Menu.Content items={menuItems} />
+              </Card.Header>
+              <Surface.Surface type={AppSurface.Card} data={{ subject: result.object }} limit={1} />
+            </Card.Root>
+          </Focus.Item>
+        </Mosaic.Tile>
+      </Menu.Root>
+    );
+  },
+);
+
+SearchResultTile.displayName = 'SearchResultTile';

package/src/components/SearchResultStack/index.ts

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

package/src/components/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Searchbar';
-export * from './SearchMain';
-export * from './SearchDialog';
+export * from './SearchResultStack';

package/src/constants.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from '#meta';
+
+export const SEARCH_DIALOG = `${meta.id}.SearchDialog`;

package/src/containers/SearchArticle/SearchArticle.stories.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { SearchContextProvider } from '#hooks';
+import { translations } from '#translations';
+
+import { SearchArticle } from './SearchArticle';
+
+random.seed(0);
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <SearchContextProvider>
+      <SearchArticle role='article' space={space} attendableId={space.id} />
+    </SearchContextProvider>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-search/containers/SearchArticle',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      capabilities: [Capability.contributes(AppCapabilities.Translations, translations)],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Organization.Organization, Person.Person],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+
+              const factory = createObjectFactory(personalSpace.db, random as any);
+              yield* Effect.promise(() =>
+                factory([
+                  { type: Organization.Organization, count: 10 },
+                  { type: Person.Person, count: 50 },
+                ]),
+              );
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/SearchArticle/SearchArticle.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Entity, Filter, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-search';
+import { Text } from '@dxos/schema';
+import { isTauri, getHostPlatform } from '@dxos/util';
+
+import { SearchResultStack } from '#components';
+import { useGlobalSearch, useGlobalSearchResults, useWebSearch } from '#hooks';
+
+export const SearchArticle = ({ space }: AppSurface.SpaceArticleProps) => {
+  // TODO(burdon): Option to query across spaces.
+  const [query, setQuery] = useState<string>();
+  // TODO(burdon): Re-enable full-text search when indexer is available in all environments.
+  const objects = useQuery(
+    space.db,
+    query === undefined ? Query.select(Filter.nothing()) : Query.select(Filter.not(Filter.type(Text.Text))),
+  );
+
+  const { setMatch } = useGlobalSearch();
+  const results = useGlobalSearchResults(objects);
+  const { results: webResults } = useWebSearch({ query });
+  const allResults = useMemo(
+    () => [...results, ...webResults].filter(({ object }) => object && Entity.getLabel(object)),
+    [results, webResults],
+  );
+
+  const handleSearch = useCallback(
+    (text: string) => {
+      setQuery(text);
+      setMatch?.(text);
+    },
+    [setMatch],
+  );
+
+  const autoFocus = !isTauri() || getHostPlatform() !== 'ios';
+
+  // TODO(burdon): Move current up/down without losing focus.
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <SearchResultStack results={allResults} />
+        </Panel.Content>
+        <Panel.Statusbar asChild>
+          <Toolbar.Root>
+            <SearchList.Input placeholder='Search...' autoFocus={autoFocus} />
+          </Toolbar.Root>
+        </Panel.Statusbar>
+      </Panel.Root>
+    </SearchList.Root>
+  );
+};

package/src/containers/SearchArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { SearchArticle as default } from './SearchArticle';

package/src/containers/SearchDialog/SearchDialog.stories.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog } from '@dxos/react-ui';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { SearchContextProvider } from '#hooks';
+import { translations } from '#translations';
+
+import { SearchDialog } from './SearchDialog';
+
+random.seed(0);
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <SearchContextProvider>
+      <Dialog.Root defaultOpen>
+        <Dialog.Overlay>
+          <SearchDialog role='article' space={space} attendableId={space.id} pivotId='storybook' />
+        </Dialog.Overlay>
+      </Dialog.Root>
+    </SearchContextProvider>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-search/containers/SearchDialog',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      capabilities: [Capability.contributes(AppCapabilities.Translations, translations)],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Organization.Organization, Person.Person],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+
+              const factory = createObjectFactory(personalSpace.db, random as any);
+              yield* Effect.promise(() =>
+                factory([
+                  { type: Organization.Organization, count: 10 },
+                  { type: Person.Person, count: 50 },
+                ]),
+              );
+            }),
+        }),
+      ],
+    }),
+  ],
+  tags: ['test'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Test: Story = {
+  play: async () => {
+    const body = within(document.body);
+
+    // Wait for the dialog to render and the search input to appear.
+    const searchInput = await body.findByRole('textbox', undefined, { timeout: 10_000 });
+    await expect(searchInput).toBeInTheDocument();
+
+    // Type a search term that should match generated Person/Organization names.
+    await userEvent.type(searchInput, 'a');
+
+    // Wait for search results to appear as options in the listbox.
+    await waitFor(
+      async () => {
+        const options = body.queryAllByRole('option');
+        await expect(options.length).toBeGreaterThan(0);
+      },
+      { timeout: 10_000 },
+    );
+  },
+};

package/src/containers/SearchDialog/SearchDialog.tsx

@@ -0,0 +1,93 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { getObjectPathFromObject, LayoutOperation } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { Entity, Filter, Obj, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-search';
+import { Text } from '@dxos/schema';
+
+import { useGlobalSearch, useGlobalSearchResults } from '#hooks';
+import { meta } from '#meta';
+import { type SearchResult } from '#types';
+
+export type SearchDialogProps = AppSurface.SpaceArticleProps<{
+  pivotId?: string;
+}>;
+
+export const SearchDialog = ({ space, pivotId: pivotIdProp }: SearchDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const { setMatch } = useGlobalSearch();
+  const layout = useLayout();
+  const pivotId = pivotIdProp ?? layout.active[layout.active.length - 1];
+  const [query, setQuery] = useState<string>();
+
+  // TODO(burdon): Re-enable full-text search when indexer is available in all environments.
+  const objects = useQuery(
+    space?.db,
+    query === undefined ? Query.select(Filter.nothing()) : Query.select(Filter.not(Filter.type(Text.Text))),
+  );
+
+  const results = useGlobalSearchResults(objects);
+  const allResults = useMemo(() => results.filter(({ object }) => object && Entity.getLabel(object)), [results]);
+
+  const handleSearch = useCallback(
+    (text: string) => {
+      setQuery(text);
+      setMatch?.(text);
+    },
+    [setMatch],
+  );
+
+  const handleSelect = useCallback(
+    async (result: SearchResult) => {
+      if (!result.object || !Obj.isObject(result.object)) {
+        return;
+      }
+
+      const qualifiedPath = getObjectPathFromObject(result.object);
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      await invokePromise(LayoutOperation.Open, {
+        subject: [qualifiedPath],
+        pivotId,
+        positioning: 'end',
+      });
+    },
+    [pivotId, invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('search-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' />
+        </Dialog.Close>
+      </Dialog.Header>
+      <SearchList.Root onSearch={handleSearch}>
+        <SearchList.Input classNames='px-0' autoFocus placeholder={t('search.placeholder')} />
+        <SearchList.Viewport classNames='max-h-[24rem]'>
+          {allResults.map((result) => (
+            <SearchList.Item
+              key={result.id}
+              classNames='flex gap-2 items-center'
+              value={result.id}
+              label={result.label ?? (result.object ? Entity.getLabel(result.object) : undefined) ?? result.id}
+              icon={result.icon}
+              onSelect={() => void handleSelect(result)}
+            />
+          ))}
+          {query && allResults.length === 0 && <SearchList.Empty />}
+        </SearchList.Viewport>
+      </SearchList.Root>
+    </Dialog.Content>
+  );
+};

package/src/containers/SearchDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { SearchDialog as default } from './SearchDialog';

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const SearchDialog: ComponentType<any> = lazy(() => import('./SearchDialog'));
+export const SearchArticle: ComponentType<any> = lazy(() => import('./SearchArticle'));

package/src/hooks/index.ts

@@ -3,5 +3,7 @@
 //
 
 export * from './sync';
+
 export * from './useGlobalSearch';
 export * from './useSearchResults';
+export * from './useWebSearch';

package/src/hooks/sync.test.ts

@@ -5,17 +5,19 @@
 import { describe, expect, test } from 'vitest';
 
 import { Client } from '@dxos/client';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { Filter, Obj } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
+import { random } from '@dxos/random';
 
 import { filterObjectsSync } from './sync';
 
-faker.seed(1);
+random.seed(1);
 
 // TODO(burdon): Reconcile with agent/minisearch.
 
 describe('Search', () => {
-  test('Prefix text search', async () => {
+  // TODO(mykola): Fix FTS index to filter by fields.
+  test.skip('Prefix text search', async () => {
     const client = new Client();
     await client.initialize();
     await client.halo.createIdentity();
@@ -24,11 +26,11 @@ describe('Search', () => {
     const space = await client.spaces.create();
     Array.from({ length: 20 }).map((_, i) => {
       const content =
-        i === 10 ? faker.lorem.sentence() + ` ${match}}. ` + faker.lorem.sentence() : faker.lorem.sentences();
-      return space.db.add(Obj.make(Type.Expando, { title: faker.lorem.sentence(), content }));
+        i === 10 ? random.lorem.sentence() + ` ${match}}. ` + random.lorem.sentence() : random.lorem.sentences();
+      return space.db.add(Obj.make(TestSchema.Expando, { title: random.lorem.sentence(), content }));
     });
 
-    const { objects } = await space.db.query(Filter.everything()).run();
+    const objects = await space.db.query(Filter.everything()).run();
     const results = filterObjectsSync(objects, new RegExp(match, 'i'));
     expect(results).to.have.length(1);
   });

package/src/hooks/sync.ts

@@ -2,13 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 
-import { Obj } from '@dxos/echo';
-import { DataType } from '@dxos/schema';
+import { Entity, Obj, Type } from '@dxos/echo';
+import { Text } from '@dxos/schema';
 
-import { type SearchResult } from '../types';
+import { type SearchResult } from '#types';
 
 export const queryStringToMatch = (queryString?: string): RegExp | undefined => {
   const trimmed = queryString?.trim();
@@ -16,8 +15,12 @@ export const queryStringToMatch = (queryString?: string): RegExp | undefined =>
 };
 
 // TODO(burdon): Type name registry linked to schema?
-const getIcon = (schema: Schema.Schema.AnyNoContext | undefined): string | undefined => {
-  if (!(schema && SchemaAST.isTypeLiteral(schema.ast))) {
+const getIcon = (type: Type.AnyEntity | undefined): string | undefined => {
+  if (!type) {
+    return undefined;
+  }
+  const schema = Type.getSchema(type);
+  if (!SchemaAST.isTypeLiteral(schema.ast)) {
     return undefined;
   }
   const keys = schema.ast.propertySignatures.map((p) => p.name);
@@ -39,39 +42,34 @@ const getIcon = (schema: Schema.Schema.AnyNoContext | undefined): string | undef
 export type TextFields = Record<string, string>;
 
 // TODO(thure): This returns `SearchResult[]` which is not just a narrower set of objects as the name implies.
-export const filterObjectsSync = <T extends Record<string, any>>(objects: T[], match?: RegExp): SearchResult[] => {
+export const filterObjectsSync = <T extends Entity.Unknown>(objects: T[], match?: RegExp): SearchResult<T>[] => {
   if (!match) {
     return [];
   }
 
-  return objects.reduce<SearchResult[]>((results, object) => {
+  return objects.reduce<SearchResult<T>[]>((results, object) => {
     // TODO(burdon): Hack to ignore Text objects.
-    if (object instanceof DataType.Text) {
+    if (Obj.instanceOf(Text.Text, object)) {
       return results;
     }
 
     const fields = mapObjectToTextFields(object);
     Object.entries(fields).some(([, value]) => {
-      const result = value.match(match);
-      if (result) {
-        // TODO(burdon): Use schema.
-        const label = getStringProperty(object, ['label', 'name', 'title']);
-
-        results.push({
-          id: object.id,
-          type: getIcon(Obj.getSchema(object)),
-          label,
-          match,
-          // TODO(burdon): Truncate.
-          // TODO(burdon): Issue with sketch documents.
-          snippet: value !== label ? value : (fields.content ?? fields.description ?? undefined),
-          object,
-        });
-
-        return true;
-      }
+      // TODO(burdon): Use schema.
+      const label = Obj.getLabel(object as any);
+
+      results.push({
+        id: object.id,
+        type: getIcon(Entity.getType(object)),
+        label,
+        match,
+        // TODO(burdon): Truncate.
+        // TODO(burdon): Issue with sketch documents.
+        snippet: value !== label ? value : (fields.content ?? fields.description ?? undefined),
+        object,
+      });
 
-      return false;
+      return true;
     });
 
     return results;
@@ -95,13 +93,13 @@ export const getStringProperty = (object: any, keys: string[]): string | undefin
 };
 
 // TODO(burdon): Filter system fields.
-const getKeys = (object: Record<string, unknown>): string[] => {
+const getKeys = <T extends Entity.Unknown>(object: T): string[] => {
   try {
     const obj = JSON.parse(JSON.stringify(object));
     return Object.keys(obj).filter(
       (key) => key !== 'id' && key !== 'identityKey' && key[0] !== '_' && key[0] !== '@',
     ) as string[];
-  } catch (err) {
+  } catch {
     // TODO(burdon): Error with TLDraw sketch.
     //  Uncaught Error: Type with the name content has already been defined with a different constructor
     return [];
@@ -109,13 +107,13 @@ const getKeys = (object: Record<string, unknown>): string[] => {
 };
 
 // TODO(burdon): Use ECHO schema.
-export const mapObjectToTextFields = <T extends Record<string, unknown>>(object: T): TextFields => {
+export const mapObjectToTextFields = <T extends Entity.Unknown>(object: T): TextFields => {
   return getKeys(object).reduce<TextFields>((fields, key) => {
-    const value = object[key] as any;
-    if (typeof value === 'string' || value instanceof DataType.Text) {
+    const value = (object as any)[key];
+    if (typeof value === 'string' || Obj.instanceOf(Text.Text, value)) {
       try {
         fields[key] = String(value);
-      } catch (err) {
+      } catch {
         // TODO(burdon): Exception when parsing sketch document.
       }
     }