@dxos/plugin-space 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -0,0 +1,134 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { type ObjectSurfaceProps } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
+import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchPanel, useSearchListResults } from '@dxos/react-ui-search';
+import { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+/**
+ * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
+ */
+const useMetadataResolver = () => {
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
+  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
+};
+
+/**
+ * Article view for collections.
+ */
+export const CollectionArticle = ({ subject, attendableId }: ObjectSurfaceProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
+  const resolveMetadata = useMetadataResolver();
+  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata, attendableId);
+
+  return (
+    <SearchPanel onSearch={handleSearch}>
+      <Mosaic.Container asChild>
+        <ScrollArea.Root centered padding thin>
+          <ScrollArea.Viewport>
+            <Mosaic.Stack
+              classNames='gap-1'
+              draggable={false}
+              items={items}
+              getId={(item) => item.id}
+              Tile={ObjectTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
+  );
+};
+
+type ObjectItem = {
+  id: string;
+  object: Obj.Unknown;
+  targetPath: string;
+  icon: string;
+  iconHue?: string;
+};
+
+const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const typename = Obj.getTypename(item.object) ?? '';
+  const label =
+    Obj.getLabel(item.object) ??
+    toLocalizedString(['object-name.placeholder', { ns: typename, defaultValue: item.id }], t);
+  const styles = item.iconHue ? getStyles(item.iconHue) : undefined;
+
+  const handleClick = useCallback(
+    () => void invokePromise(LayoutOperation.Open, { subject: [item.targetPath] }),
+    [invokePromise, item.targetPath],
+  );
+
+  return (
+    <Card.Root fullWidth role='button' classNames='cursor-pointer' onClick={handleClick}>
+      <Card.Toolbar>
+        <Card.ToolbarIconButton
+          variant='ghost'
+          label={label}
+          icon={item.icon}
+          iconOnly
+          iconClassNames={styles?.surfaceText}
+        />
+        <Card.Title>{label}</Card.Title>
+        <Card.Menu />
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};
+
+type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (
+  collection: Collection.Collection,
+  resolveMetadata: MetadataResolver,
+  attendableId?: string,
+) => {
+  const objects = useMemo(
+    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
+    [collection.objects],
+  );
+
+  const items = useMemo(
+    () =>
+      objects.map((obj) => {
+        const typename = Obj.getTypename(obj);
+        const metadata = typename ? resolveMetadata(typename) : {};
+        const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
+
+        return {
+          id: Obj.getDXN(obj).toString(),
+          object: obj,
+          targetPath,
+          icon: metadata.icon ?? 'ph--placeholder--regular',
+          iconHue: metadata.iconHue,
+        } satisfies ObjectItem;
+      }),
+    [objects, resolveMetadata, attendableId],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (item) => Obj.getLabel(item.object) ?? item.id,
+  });
+
+  return { items: results, handleSearch };
+};

package/src/containers/CollectionArticle/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { CollectionArticle } from './CollectionArticle';
+
+export default CollectionArticle;

package/src/containers/CollectionSection/CollectionSection.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type ObjectSurfaceProps } from '@dxos/app-toolkit/ui';
+import { type Collection } from '@dxos/echo';
+import { useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export const CollectionSection = ({ role, subject }: ObjectSurfaceProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
+
+  // TODO(wittjosiah): Better placeholder.
+  return (
+    <div role={role} className='min-h-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
+      <span className='truncate'>{subject.name ?? t('unnamed-collection.label')}</span>
+    </div>
+  );
+};

package/src/containers/CollectionSection/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CollectionSection } from './CollectionSection';
+
+export default CollectionSection;

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Database } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { Dialog } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
+import { translations } from '../../translations';
+
+const mockOptions: CreateObjectOption[] = [
+  { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
+  { id: 'org.dxos.type.table', label: 'Table', icon: 'ph--table--regular' },
+  { id: 'org.dxos.type.canvas', label: 'Canvas', icon: 'ph--paint-brush--regular' },
+  { id: 'org.dxos.type.thread', label: 'Thread', icon: 'ph--chat-circle-text--regular' },
+];
+
+const mockSpaces = [
+  { id: 'space-1', db: {} as Database.Database, displayName: 'Personal Space' },
+  { id: 'space-2', db: {} as Database.Database, displayName: 'Team Space' },
+] as unknown as Space[];
+
+const DefaultStory = () => {
+  const [typename, setTypename] = useState<string | undefined>(undefined);
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <Dialog.Content>
+          <Dialog.Body>
+            <CreateObjectPanel
+              options={mockOptions}
+              spaces={mockSpaces}
+              typename={typename}
+              target={{} as Database.Database}
+              resolve={() => mockMetadata}
+              onTypenameChange={setTypename}
+              onCreateObject={async () => {}}
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const mockInputSchema = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String.annotations({ title: 'Name' }),
+  description: Schema.optional(Schema.String.annotations({ title: 'Description' })),
+});
+
+const mockMetadata: Metadata = {
+  createObject: () => Effect.succeed({ id: 'mock-id', subject: [], object: {} as any }),
+  inputSchema: mockInputSchema,
+  icon: 'ph--file-text--regular',
+};
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateObjectDialog',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withPluginManager()],
+  parameters: {
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+};

package/src/{components/CreateDialog → containers/CreateObjectDialog}/CreateObjectDialog.tsx

@@ -3,33 +3,31 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/react';
-import { Database, Obj, Type } from '@dxos/echo';
-import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
+import { Capability } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { Collection, Database, Obj, Type } from '@dxos/echo';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { Operation } from '@dxos/operation';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
 import { Dialog, useTranslation } from '@dxos/react-ui';
-import { type Collection } from '@dxos/schema';
+import { ViewAnnotation } from '@dxos/schema';
 
-import { meta } from '../../meta';
-import { SpaceOperation } from '../../types';
+import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from '#components';
+import { meta } from '#meta';
 
-import { CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from './CreateObjectPanel';
+export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
 
-export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
-
-export type CreateObjectDialogProps = Pick<
-  CreateObjectPanelProps,
-  'target' | 'views' | 'typename' | 'initialFormValues'
-> & {
+export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'initialFormValues'> & {
+  views?: boolean;
   onCreateObject?: (object: Obj.Unknown) => void;
   shouldNavigate?: (object: Obj.Unknown) => boolean;
+  targetNodeId?: string;
 };
 
 export const CreateObjectDialog = ({
@@ -39,9 +37,10 @@ export const CreateObjectDialog = ({
   initialFormValues,
   onCreateObject,
   shouldNavigate: _shouldNavigate,
+  targetNodeId,
 }: CreateObjectDialogProps) => {
-  const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
+  const manager = usePluginManager();
   const operationInvoker = useOperationInvoker();
   const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
@@ -49,25 +48,42 @@ export const CreateObjectDialog = ({
   const spaces = useSpaces();
   const closeRef = useRef<HTMLButtonElement | null>(null);
 
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+  // TODO(wittjosiah): Support database schemas.
+  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
+
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (typename) => {
+    (id) => {
       const metadata = manager.capabilities
-        .getAll(Common.Capability.Metadata)
-        .find(({ id }) => id === typename)?.metadata;
+        .getAll(AppCapabilities.Metadata)
+        .find(({ id: entryId }) => entryId === id)?.metadata;
       return metadata?.createObject ? (metadata as Metadata) : undefined;
     },
     [manager],
   );
 
-  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
-  // TODO(wittjosiah): Support database schemas.
-  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
-  const userSchemas = useMemo(
+  const viewTypenames = useMemo(() => {
+    const set = new Set<string>();
+    for (const schema of schemas ?? []) {
+      if (ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+        set.add(Type.getTypename(schema));
+      }
+    }
+    return set;
+  }, [schemas]);
+
+  const options = useMemo<CreateObjectOption[]>(
     () =>
-      schemas
-        ?.filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
-        .filter((schema) => !!resolve(Type.getTypename(schema))) ?? [],
-    [schemas],
+      manager.capabilities
+        .getAll(AppCapabilities.Metadata)
+        .filter((entry) => entry.metadata?.createObject)
+        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
+        .map((entry) => ({
+          id: entry.id,
+          label: t('typename.label', { ns: entry.id, defaultValue: entry.id }),
+          icon: entry.metadata?.icon,
+        })),
+    [manager, views, viewTypenames, t],
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
@@ -83,26 +99,20 @@ export const CreateObjectDialog = ({
 
         const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
         invariant(db, 'Missing database');
-        const object = yield* metadata.createObject(data, { db });
-        if (Obj.isObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
-          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-          const hidden = !metadata.addToCollectionOnCreate;
-          yield* operationInvoker.invoke(SpaceOperation.AddObject, {
-            target,
-            object,
-            hidden,
+        const result = yield* metadata.createObject(data, {
+          db,
+          target,
+          targetNodeId,
+        });
+        const shouldNavigate = _shouldNavigate ?? (() => true);
+        if (result.subject.length > 0 && shouldNavigate(result.object)) {
+          yield* operationInvoker.invoke(LayoutOperation.Open, {
+            subject: [...result.subject],
+            navigation: 'immediate',
           });
-          const shouldNavigate = _shouldNavigate ?? (() => true);
-          if (shouldNavigate(object)) {
-            yield* Effect.promise(() =>
-              operationInvoker.invokePromise(Common.LayoutOperation.Open, {
-                subject: [Obj.getDXN(object).toString()],
-              }),
-            );
-          }
-
-          onCreateObject?.(object);
         }
+
+        onCreateObject?.(result.object);
       }).pipe(
         Effect.provideService(Capability.Service, manager.capabilities),
         Effect.provideService(Operation.Service, operationInvoker),
@@ -115,30 +125,28 @@ export const CreateObjectDialog = ({
     <Dialog.Content>
       <Dialog.Header>
         <Dialog.Title>
-          {t('create object dialog title', {
-            object: t('typename label', {
-              ns: typename,
-              defaultValue: views ? 'View' : 'Object',
-            }),
+          {t('create-object-dialog.title', {
+            object: t('typename.label', { ns: typename, defaultValue: views ? 'View' : 'Object' }),
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
           <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
-      <CreateObjectPanel
-        schemas={userSchemas}
-        spaces={spaces}
-        target={target}
-        views={views}
-        typename={typename}
-        initialFormValues={initialFormValues}
-        defaultSpaceId={client.spaces.default.id}
-        resolve={resolve}
-        onTargetChange={setTarget}
-        onTypenameChange={setTypename}
-        onCreateObject={handleCreateObject}
-      />
+      <Dialog.Body>
+        <CreateObjectPanel
+          options={options}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          initialFormValues={initialFormValues}
+          defaultSpaceId={getPersonalSpace(client)?.id ?? client.spaces.get()[0]?.id}
+          resolve={resolve}
+          onCreateObject={handleCreateObject}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+        />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/containers/CreateObjectDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+export { CreateObjectDialog as default } from './CreateObjectDialog';

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { CreateSpaceDialog } from './CreateSpaceDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <CreateSpaceDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateSpaceDialog',
+  component: CreateSpaceDialog,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof CreateSpaceDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/{components/CreateDialog → containers/CreateSpaceDialog}/CreateSpaceDialog.tsx

@@ -6,17 +6,18 @@ import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
 import { runAndForwardErrors } from '@dxos/effect';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { SpaceForm, SpaceOperation } from '../../types';
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { SpaceForm } from '#types';
+import { SpaceOperation } from '#operations';
 
-export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
 
 type FormValues = Schema.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
@@ -34,9 +35,9 @@ export const CreateSpaceDialog = () => {
         const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
         if (result?.space) {
           yield* Effect.promise(() =>
-            invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: result.space.id }),
+            invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) }),
           );
-          yield* Effect.promise(() => invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }));
+          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
         }
       });
       await runAndForwardErrors(program);
@@ -47,26 +48,28 @@ export const CreateSpaceDialog = () => {
   return (
     <Dialog.Content>
       <Dialog.Header>
-        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
+        <Dialog.Title>{t('create-space-dialog.title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
-      <Form.Root
-        testId='create-space-form'
-        autoFocus
-        schema={SpaceForm}
-        values={initialValues}
-        fieldProvider={inputSurfaceLookup}
-        onSave={handleCreateSpace}
-      >
-        <Form.Viewport>
-          <Form.Content>
-            <Form.FieldSet />
-            <Form.Submit />
-          </Form.Content>
-        </Form.Viewport>
-      </Form.Root>
+      <Dialog.Body>
+        <Form.Root
+          testId='create-space-form'
+          autoFocus
+          schema={SpaceForm}
+          defaultValues={initialValues}
+          fieldProvider={inputSurfaceLookup}
+          onSave={handleCreateSpace}
+        >
+          <Form.Viewport>
+            <Form.Content>
+              <Form.FieldSet />
+              <Form.Submit />
+            </Form.Content>
+          </Form.Viewport>
+        </Form.Root>
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/containers/CreateSpaceDialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CreateSpaceDialog } from './CreateSpaceDialog';
+
+export default CreateSpaceDialog;

package/src/{components/SyncStatus → containers/InlineSyncStatus}/InlineSyncStatus.tsx

@@ -2,19 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { getSpacePath } from '@dxos/app-toolkit';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space, useSpaceSyncState } from '@dxos/react-client/echo';
 import { Tooltip, useTranslation } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
 
-import { usePath } from '../../hooks';
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 const useEdgeStatus = (): EdgeStatus.ConnectionState => {
   const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
@@ -30,19 +28,10 @@ const useEdgeStatus = (): EdgeStatus.ConnectionState => {
 
 export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
   const { t } = useTranslation(meta.id);
-  const id = space.id;
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  const attended = useAttended();
-  const startOfAttention = attended.at(-1);
-  const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
-
+  const qualifiedId = getSpacePath(space.id);
+  const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);
+  const attended = hasAttention || isRelated;
+  const containsAttended = isAncestor && !open;
   const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
@@ -50,12 +39,12 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
 
   return (
-    <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
+    <Tooltip.Trigger asChild content={t('syncing.label')} side='bottom'>
       <AttentionGlyph
         syncing={syncing}
-        attended={isAttended}
+        attended={attended}
         containsAttended={containsAttended}
-        classNames='self-center mie-1'
+        classNames='self-center mx-1'
       />
     </Tooltip.Trigger>
   );

package/src/containers/InlineSyncStatus/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { InlineSyncStatus } from './InlineSyncStatus';
+
+export default InlineSyncStatus;