@dxos/plugin-search 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

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, Query } from '@dxos/echo';
+import { Filter, 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/plugin';
+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

@@ -2,119 +2,92 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { Graph, type Node } from '@dxos/plugin-graph';
-import { useClient } from '@dxos/react-client';
+import { getObjectPathFromObject, LayoutOperation } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { Entity, Obj, Query } from '@dxos/echo';
 import { Filter, useQuery } from '@dxos/react-client/echo';
-import { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { mx, osTranslations } from '@dxos/ui-theme';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-search';
+import { Text } from '@dxos/schema';
 
-import { useSearchResults } from '../../hooks';
-import { meta } from '../../meta';
+import { useGlobalSearch, useGlobalSearchResults } from '#hooks';
+import { meta } from '#meta';
+import { type SearchResult } from '#types';
 
-type SearchListResultProps = {
-  node: Node.Node;
-  onSelect?: (nodeId: string) => void;
-};
+export type SearchDialogProps = AppSurface.SpaceArticleProps<{
+  pivotId?: string;
+}>;
 
-const SearchListResult = forwardRef<HTMLDivElement, SearchListResultProps>(({ node, onSelect }, forwardedRef) => {
+export const SearchDialog = ({ space, pivotId: pivotIdProp }: SearchDialogProps) => {
   const { t } = useTranslation(meta.id);
-  const label = toLocalizedString(node?.properties.label ?? 'never', t);
-  const handleSelect = useCallback(() => {
-    onSelect?.(node!.id);
-  }, [node, onSelect]);
-  return (
-    <SearchList.Item
-      value={node!.id}
-      label={label}
-      icon={node?.properties.icon}
-      classNames='flex gap-2 items-center px-2'
-      onSelect={handleSelect}
-      ref={forwardedRef}
-    />
+  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))),
   );
-});
 
-export type SearchDialogProps = {
-  pivotId: string;
-};
+  const results = useGlobalSearchResults(objects);
+  const allResults = useMemo(() => results.filter(({ object }) => object && Entity.getLabel(object)), [results]);
 
-export const SearchDialog = ({ pivotId }: SearchDialogProps) => {
-  const { t } = useTranslation(meta.id);
-  const { graph } = useAppGraph();
-  const layout = useLayout();
-  const closed = (Array.isArray(layout.inactive) ? layout.inactive : [layout.inactive])
-    .map((id) => (graph ? Graph.getNode(graph, id) : Option.none()))
-    .filter(Boolean);
-  const [queryString, setQueryString] = useState('');
-  const client = useClient();
-  const dangerouslyLoadAllObjects = useQuery(client.spaces, Filter.everything());
-  const [pending, results] = useSearchResults(queryString, dangerouslyLoadAllObjects);
-  const resultObjects = Array.from(results.keys());
-  const { invokePromise } = useOperationInvoker();
+  const handleSearch = useCallback(
+    (text: string) => {
+      setQuery(text);
+      setMatch?.(text);
+    },
+    [setMatch],
+  );
 
   const handleSelect = useCallback(
-    async (nodeId: string) => {
-      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
-
-      // If node is already present in the active parts, scroll to it and close the dialog.
-      const index = layout.active.findIndex((id) => id === nodeId);
-      if (index !== -1) {
-        await invokePromise(LayoutOperation.ScrollIntoView, { subject: nodeId });
-      } else {
-        await invokePromise(LayoutOperation.Open, {
-          subject: [nodeId],
-          pivotId,
-          positioning: 'end',
-        });
+    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, layout],
+    [pivotId, invokePromise],
   );
 
-  const handleSearch = useCallback((query: string) => {
-    setQueryString(query);
-  }, []);
-
   return (
     <Dialog.Content>
-      <Dialog.Title>{t('search dialog title')}</Dialog.Title>
+      <Dialog.Header>
+        <Dialog.Title>{t('search-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton />
+        </Dialog.Close>
+      </Dialog.Header>
       <SearchList.Root onSearch={handleSearch}>
-        <SearchList.Content classNames='max-h-[24rem] overflow-auto'>
-          <SearchList.Input placeholder={t('search placeholder')} />
-          <SearchList.Viewport>
-            {queryString.length > 0 ? (
-              resultObjects.length > 0 ? (
-                resultObjects
-                  .map((object) => Graph.getNode(graph, Obj.getDXN(object).toString()))
-                  .filter(Option.isSome)
-                  .map((node) => <SearchListResult key={node.value.id} node={node.value} onSelect={handleSelect} />)
-              ) : (
-                <p className='px-1'>{t(pending ? 'pending results message' : 'empty results message')}</p>
-              )
-            ) : (
-              <>
-                {closed.length > 0 && (
-                  <h2 className={mx('my-1', 'text-description')}>{t('recently closed heading')}</h2>
-                )}
-                {closed.filter(Option.isSome).map((node) => (
-                  <SearchListResult key={node.value.id} node={node.value} onSelect={handleSelect} />
-                ))}
-              </>
-            )}
-          </SearchList.Viewport>
-        </SearchList.Content>
+        <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.Close asChild>
-        <Button variant='primary'>{t('close label', { ns: osTranslations })}</Button>
-      </Dialog.Close>
     </Dialog.Content>
   );
 };

package/src/containers/SearchDialog/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export { SearchDialog, type SearchDialogProps } from './SearchDialog';
 export { SearchDialog as default } from './SearchDialog';

package/src/containers/index.ts

@@ -4,7 +4,5 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export type { SearchDialogProps } from './SearchDialog';
-
 export const SearchDialog: ComponentType<any> = lazy(() => import('./SearchDialog'));
-export const SearchMain: ComponentType<any> = lazy(() => import('./SearchMain'));
+export const SearchArticle: ComponentType<any> = lazy(() => import('./SearchArticle'));

package/src/hooks/sync.test.ts

@@ -7,11 +7,11 @@ import { describe, expect, test } from 'vitest';
 import { Client } from '@dxos/client';
 import { Filter, Obj } from '@dxos/echo';
 import { TestSchema } from '@dxos/echo/testing';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { filterObjectsSync } from './sync';
 
-faker.seed(1);
+random.seed(1);
 
 // TODO(burdon): Reconcile with agent/minisearch.
 
@@ -26,8 +26,8 @@ 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(TestSchema.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();

package/src/hooks/sync.ts

@@ -5,10 +5,10 @@
 import type * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 
-import { type Entity, Obj } from '@dxos/echo';
+import { Entity, Obj } 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();
@@ -57,7 +57,7 @@ export const filterObjectsSync = <T extends Entity.Unknown>(objects: T[], match?
 
       results.push({
         id: object.id,
-        type: getIcon(Obj.getSchema(object)),
+        type: getIcon(Entity.getSchema(object)),
         label,
         match,
         // TODO(burdon): Truncate.

package/src/hooks/useGlobalSearch.tsx

@@ -6,14 +6,14 @@ import React, { type PropsWithChildren, createContext, useCallback, useContext,
 
 import { raise } from '@dxos/debug';
 import { type Entity } from '@dxos/echo';
-import { GlobalFilterProvider } from '@dxos/react-ui-searchlist';
+import { GlobalFilterProvider } from '@dxos/react-ui-search';
 
-import { type SearchResult } from '../types';
+import { type SearchResult } from '#types';
 
 import { filterObjectsSync, queryStringToMatch } from './sync';
 
 // Re-export for backward compatibility.
-export { useGlobalFilteredObjects, GlobalFilterProvider } from '@dxos/react-ui-searchlist';
+export { useGlobalFilteredObjects, GlobalFilterProvider } from '@dxos/react-ui-search';
 
 type SearchContextType = {
   match?: RegExp;

package/src/hooks/useWebSearch.ts

@@ -5,14 +5,14 @@
 import { useCallback, useState } from 'react';
 
 import { EXA_API_KEY } from '@dxos/ai/testing';
-import { Obj } from '@dxos/echo';
+import { Entity } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { getIconAnnotation } from '@dxos/schema';
 import { TestSchema } from '@dxos/schema/testing';
 
-import { search } from '../search';
-import { type SearchResult } from '../types';
+import { type SearchResult } from '#types';
 
+import { search } from '../search';
 import { getStringProperty } from './sync';
 
 export type UseWebSearchProps = {
@@ -44,7 +44,7 @@ export const useWebSearch = ({ query, context }: UseWebSearchProps): UseWebSearc
       });
 
       const mappedResults = results.data.map((result): SearchResult => {
-        const schema = Obj.getSchema(result);
+        const schema = Entity.getSchema(result);
         return {
           id: result.id,
           label: getStringProperty(result, ['name', 'title', 'label']),

package/src/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(wittjosiah): Hooks should not be exported from the plugin package at all.
+//   Either refactor callers to not need them or factor them out to a shared package.
 export * from './hooks';
 export * from './meta';
 export * from './types';
-
-export * from './SearchPlugin';

package/src/operations/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const SearchOperationHandlerSet = OperationHandlerSet.lazy(() => import('./open-search'));

package/src/operations/open-search.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { SEARCH_DIALOG } from '../constants';
+import { SearchOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof SearchOperation.OpenSearch> = SearchOperation.OpenSearch.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      yield* Operation.invoke(LayoutOperation.UpdateDialog, {
+        subject: SEARCH_DIALOG,
+        blockAlign: 'start',
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/plugin.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const SearchPlugin = Plugin.lazy(meta, () => import('#plugin'));
+
+export { SearchOperationHandlerSet } from './operations';

package/src/search/exa.ts

@@ -9,8 +9,8 @@ import * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 
 import { type Entity, Key, Obj, type Type } from '@dxos/echo';
-import { ReferenceAnnotationId } from '@dxos/echo/internal';
 import { isEncodedReference } from '@dxos/echo-protocol';
+import { ReferenceAnnotationId } from '@dxos/echo/internal';
 import { mapAst } from '@dxos/effect';
 import { deepMapValues, trim } from '@dxos/util';
 

package/src/translations.ts

@@ -3,21 +3,22 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as searchTranslations } from '@dxos/react-ui-search/translations';
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
 export const translations = [
+  ...searchTranslations,
   {
     'en-US': {
       [meta.id]: {
-        'plugin name': 'Search',
-        'search action label': 'Search spaces',
-        'search placeholder': 'Search…',
-        'search dialog title': 'Open',
-        'recently closed heading': 'Recently closed',
-        'pending results message': 'Searching…',
-        'empty results message': 'No matching objects',
-        'search label': 'Search',
+        'plugin.name': 'Search',
+        'search-action.label': 'Search spaces',
+        'search.placeholder': 'Search…',
+        'search-dialog.title': 'Search',
+        'recently-closed.heading': 'Recently closed',
+        'pending-results.message': 'Searching…',
+        'search.label': 'Search',
       },
     },
   },

package/src/types/SearchOperation.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @import-as-namespace
+
+import * as Schema from 'effect/Schema';
+
+import { Operation } from '@dxos/compute';
+
+import { meta } from '#meta';
+
+const SEARCH_OPERATION = `${meta.id}.operation`;
+
+export const OpenSearch = Operation.make({
+  meta: { key: `${SEARCH_OPERATION}.open-search`, name: 'Open Search' },
+  input: Schema.Void,
+  output: Schema.Void,
+});

package/src/types/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './action';
 export type * from './search';
+
+export * as SearchOperation from './SearchOperation';

package/src/types/search.ts

@@ -2,22 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import type { Entity } from '@dxos/echo';
-
-export type SearchResult<T extends Entity.Unknown = Entity.Unknown> = {
-  id: string;
-
-  /**
-   * Type kind: "contact", "project", "org", etc.
-   */
-  type?: string;
-  label?: string;
-  match?: RegExp;
-  snippet?: string;
-
-  /**
-   * Icon id.
-   */
-  icon?: string;
-  object?: T;
-};
+export type { SearchResult } from '@dxos/react-ui-search';